How to style a especific part of an array in a div in js

Question

so I have an array in a div with opacity = "0.5" and I want to find a certain spot of that div to style with opacity = "1".

I would find that spot if it was equal to a variable dummy.

This event will happen more than once.

And this is what I got:

   <script src="jquery-3.2.1.js"></script>
    <script type="text/javascript">
        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 < 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 > 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 "<span>" + ltr + "
   </span>"; }).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 < 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 < wLength; i++){
                    if(dummy === word.charAt(i)) {
                        letters[i] = dummy;
                    }
                }
                document.getElementById("dword").textContent = letters.join(' ');

        }
    </script>

The var dummy, could be up from a to z. I could use jquery if it's easier for you.

Answer 1

You can't apply the opacity on the parent div and override it in the children. The children opacity is a function of the opacity of the parent.

In other words, if you use style="opacity: 0.5;" on a parent and style="opacity: 1;" on a child, the end result is the child with 0.5 opacity still -- the child will have 100% (1) of 50% (0.5) opacity).

So, you have to apply the opacity on each child, setting style="opacity: 0.5;" on some and style="opacity: 1;" on the other:

//
// RUN JUST ONCE
// 
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 "<span>" + ltr + "</span>"; }).join('');
Array.from(dc.children).forEach(function(letterSpan) { letterSpan.style.opacity = "0.5"; })

// declare opacity-changing function
function changeOpacityOfLetter(letter) {
  const letters = dc.children;
  for (i = 0; i < letters.length; i++) {
    let letterSpan = letters[i];
    if (letter === letterSpan.innerText) {
      letterSpan.style.opacity = "1";
    }
  }
}

//
// RUN EVERYTIME THE USER INPUTS
//
changeOpacityOfLetter("g");
let dummy = "w"; // example using variable
changeOpacityOfLetter(dummy);

div { font-size: 30px; font-weight: bold; font-family: monospace; }

<div id="chrts"></div>

Answer 2

Surround each letter with a span, then you can do what you wish:

let alp = ["<span>a</span>","<span>b</span>",...];

Then you will need to update the subsequent lines of code to grab each span. Something like this:

let dc = document.getElementById("chrts").childNodes;
dc.forEach(e => {
  if (e.textContent === dummy) {
    e.style.opacity = "1";
  }
});