我正在尝试为孩子们制作一个游戏，在该游戏中，我将通过在PC上单击某个单词或在Android中触摸该单词来隐藏一个单词，然后通过执行该操作来揭示答案。我考虑过将句子拆分为数组元素，然后实现更改该句子颜色的功能。我对这种方法正确吗？预先谢谢大家。
<p id="hExample">Hello my world </p>
<script>
//Split sentence into array elements
var jExample = document.getElementById("hExample").innerHTML;
var jElements = jExample.split(" ");
//Return array elements into the sentence position
for (var y=0; y< jElements.length; y++) {
document.getElementById("hExample").innerHTML += '<span id=' + y + '>' + jElements[y] + " " + "</span> " ;
}
document.getElementById('hExample').onclick = changeColor;
function changeColor() {
if ( document.getElementById("hExample").style.color = "white") {
document.getElementById("hExample").style.color = "red";
}else{
document.getElementById("hExample").style.color = "white";
}
}
</script>
您走在正确的轨道上，但是有一个错误：
document.getElementById('hExample').onclick = changeColor;
这会在“ hExample”段落上设置一个click事件观察器，但是您要检测“ hExample”中各个跨度上的点击。这可以通过检查event.target属性来完成，该属性将等于单击的跨度。确定单击哪个跨度的代码如下所示：
document.getElementById('hExample').addEventListener('click',
function (event) {
let spanClicked = event.target;
// do something with the span
});
这是您的代码，并进行了一些修订。
如果不清楚任何代码，请询问。
const hExample = document.getElementById('hExample');
// Split sentence into array of words
var jExample = hExample.innerHTML;
var jElements = jExample.split(" ");
// wrap each word in a span
let content = "";
for (var y = 0; y < jElements.length; y++) {
content += '<span id=' + y + '>' + jElements[y] + " " + "</span> ";
}
// add all spans to hExample
hExample.innerHTML = content;
// listen for clicks inside hExample
hExample.addEventListener('click', function(evt) {
// get the clicked word
const word = evt.target;
// add or remove the hidden class
word.classList.toggle('hidden-span');
// make the word red
word.style.color = "red";
});/* hide the span */
.hidden-span {
opacity: 0;
}<p id="hExample">Hello my world </p>修订—单击时用下划线替换单词
下方有一个新注释，要求单击后的单词用下划线替换。
使用不同的方法可以轻松解决该问题。
请参见下面的代码：
const hExample = document.getElementById('hExample');
// Split sentence into array of words
let jExample = hExample.innerHTML;
let words = jExample.split(" ");
// wrap each word in a span
let content = "";
for (const word of words) {
content += `<span>${word}</span> `;
}
// add all spans to hExample
hExample.innerHTML = content;
// handle click on a word
function handleWordClick (evt) {
// get the span that was clicked
const span = evt.target;
if (span.dataset.word) {
// extract word from span's 'data-word' attribute and display in red
span.innerHTML = span.dataset.word;
delete span.dataset.word;
span.style.color = 'red';
} else {
// maintain current width of span
span.style.width = span.getBoundingClientRect().width + "px";
// store word in span's `data-word' attribute
span.dataset.word = span.innerHTML;
// show blue "_" in place of word
span.innerHTML = "_";
span.style.color = 'blue';
}
}
// listen for clicks inside hExample
hExample.addEventListener('click', handleWordClick);span {
/* this will preserve the span's width */
display: inline-block;
/* this will center text inside span */
text-align: center;
}<p id="hExample">Hello my world </p>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句