title: How to style a especific part of an array in a div in js
body: <p>so I have an array in a div with <code>opacity = "0.5"</code> and I want to find a certain spot of that div to style with <code>opacity = "1"</code>.</p>
  
  <p>I would find that spot if it was equal to a variable dummy.</p>
  
  <p>This event will happen more than once.</p>
  
  <p>And this is what I got:</p>
  
  <pre><code>   &lt;script src="jquery-3.2.1.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          var word = "" //word variable
          var wLength = 0 //word length variable
          var dummy = "" //letter guessed
          var dm = new Array(26)
  
  
  
          $(document).ready(function(){
              $("input.in2").hide()
          })
  
          $(document).ready(function(){
              $("input.bi2").hide()
          })
  
          function doGetWord(){
              word = F.gword.value;
              wLength = word.length;
              for(var i = 0; i &lt; wLength; i++){
                  document.getElementById("dword").innerHTML += "_ "
              }
              $("input.wordi").hide()
              $("input.bi").hide()
              $("input.in2").show()
              $("input.bi2").show()
          }
  
          function doGuess(){
              dummy = F.t.value
              if(dummy.length &gt; 1){
                  dummy = ""
                  F.t.value = ""
              }
              else{
                  F.t.value = ""
                  dd = dummy.toString()
                  window["cl" + dd]
                  if(window["cl" + dd] == false){
                      alert("Letter already used, please try again with another letter")
                      dummy = ""
                      F.t.value = ""
                  }
                  else{
                      window["cl" + dd] = false
                      F.t.value = ""
  
                      let dc = document.getElementById("chrts");
  
          // initialize children
     let alp = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", 
      "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
      dc.innerHTML = alp.map(function(ltr) { return "&lt;span&gt;" + ltr + "
     &lt;/span&gt;"; }).join('');
        Array.from(dc.children).forEach(function(letterSpan) { 
           letterSpan.style.opacity = "0.5"; })
     // declare opacity-changing function
   function changeOpacityOfLetter(dummy) {
   const letters = dc.children;
    for (i = 0; i &lt; letters.length; i++) {
   let letterSpan = letters[i];
      if (dummy === letterSpan.innerText) {
      letterSpan.style.opacity = "1";
  }
  }
  }
  changeOpacityOfLetter(dummy);
                      doGuessWord();
                  }
              }
          }
  
  
  
          function doGuessWord(){
              const letters = document.getElementById("dword").textContent.split(' ');
                  for(i = 0; i &lt; wLength; i++){
                      if(dummy === word.charAt(i)) {
                          letters[i] = dummy;
                      }
                  }
                  document.getElementById("dword").textContent = letters.join(' ');
  
          }
      &lt;/script&gt;
  </code></pre>
  
  <p>The var <code>dummy</code>, could be up from a to z.
  I could use jquery if it's easier for you.</p>