如何通过在PC上单击或在Android上通过触摸来更改句子中单词的颜色 [英] How to change color of a word in a sentence by clicking it on PC or by touching it on Android

问题描述

我正在尝试为孩子们制作一个游戏，在该游戏中，我将通过在PC上单击某个单词或在Android中触摸该单词来隐藏句子中的某个单词，然后通过执行该操作来揭示答案.我考虑过将句子拆分为数组元素，然后实现更改该句子颜色的功能.我对这种方法正确吗?谢谢大家.

I am trying to make a game for kids in which I shall hide a word of a sentence by clicking it on PC or by touching it in Android and then reveal the answer by doing the same. I thought of splitting the sentence into array elements and then implement the function that changes color on this sentence. Am I right with this approach ? Thank you all of you in advance.

      <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>

推荐答案

您处在正确的轨道上，但有一个错误:

You are on the right track, but you have an error:

document.getElementById('hExample').onclick = changeColor;

这会在"hExample"段落中设置一个click事件观察器，但是您要检测"hExample"中各个跨度上的点击.这可以通过检查 event.target 属性来完成，该属性将等于单击的跨度.确定单击哪个跨度的代码如下:

This sets a click event watcher on the 'hExample' paragraph, but you want to detect clicks on individual spans within 'hExample'. This can be done by checking the event.target property, which will equal the clicked span. The code to determine which span was clicked looks like this:

document.getElementById('hExample').addEventListener('click',
  function (event) {
    let spanClicked = event.target;
    // do something with the span
});

这是您的代码，已进行了一些修订.

Here's your code, corrected with a few revisions.

如果不清楚任何代码，请询问.

If any of the code is unclear, please ask.

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>

修订版-单击时用下划线替换单词

下面的新注释要求在单击时用下划线替换单击的单词.

A new comment below requests that the clicked word be replaced with an underscore when clicked.

使用其他方法可以轻松处理.

That can be handled easily, using a different method.

请参见下面的代码:

  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>

这篇关于如何通过在PC上单击或在Android上通过触摸来更改句子中单词的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！