Javascript - Highlighting corresponding spans, and add an other color when one of them is empty

Clara
February 15, 2024
85 views
2 votes
3 Answers

I would like to create a JS script to highlight the spans that have a corresponding index in two different containers. I managed to create that script and it works, however, I would like to add one detail : when one of the two corresponding span is empty the other one should be highlighted in a different color.

I tried this :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Textes en Parallèle</title>

<style>
body {
    display: flex;
}

.text-container {
    flex: 1;
    margin: 10px;
    border: 1px solid #ccc;
    padding: 10px;
    overflow-y: scroll;
    max-height: 300px;
}

.highlight {
    background-color: yellow;
}

.highlight-empty {
       background-color: #8eff8e; /* Couleur verte pour le surlignage */
   }

</style>

</head>
<body>
    <div class="text-container" id="text1">
        <!-- first version of the text -->
        <span>span1.</span> common text
        <span>span 2.</span>
        <span></span>
    </div>
    <div class="text-container" id="text2">
        <!-- second version of the text -->
        <span>corresponding span 1.</span> common text
        <span>corresp span 2</span>
        <span>add => empty span on the other side</span>
    </div>
    <script>

    document.addEventListener('DOMContentLoaded', function () {
        const textContainers1 = document.getElementById('text1').querySelectorAll('span');
        const textContainers2 = document.getElementById('text2').querySelectorAll('span');

        function addHighlight(index) {
            textContainers1[index].classList.add('highlight');
            textContainers2[index].classList.add('highlight');
        }

        function removeHighlight(index) {
            textContainers1[index].classList.remove('highlight');
            textContainers2[index].classList.remove('highlight');
        }

        textContainers1.forEach((paragraph1, index) => {
            paragraph1.addEventListener('mouseover', () => {
                if (textContainers2[index].innerHTML.trim() === '') {
                    textContainers2[index].classList.add('highlight-empty');
                }
                addHighlight(index);
            });

            paragraph1.addEventListener('mouseout', () => {
                removeHighlight(index);
                textContainers2[index].classList.remove('highlight-empty');
            });
        });

        textContainers2.forEach((paragraph2, index) => {
            paragraph2.addEventListener('mouseover', () => {
                if (textContainers1[index].innerHTML.trim() === '') {
                    textContainers1[index].classList.add('highlight-empty');
                }
                addHighlight(index);
            });

            paragraph2.addEventListener('mouseout', () => {
                removeHighlight(index);
                textContainers1[index].classList.remove('highlight-empty');
            });
        });
    });

    </script>
</body>

</html>

I don’t understand why my add => empty span on the other side is still in yellow and not in green when I over. Do you have an idea what’s wrong with my JS conditions ?

Thank you so much in advance,

Answers

There’s 2 issues here. Firstly your logic only adds the .highlight-empty class to the empty span. Therefore no difference is shown. You need to amend the logic to also add that class to the span which does have content, so that it has an effect.

Secondly, you need to make the .highlight-empty class in your CSS have a higher specificity so that it overrides the .highlight class. The simple way to do this is by adding another selector to it.

Here’s a working version with these changes made:

document.addEventListener('DOMContentLoaded', function() {
  const textContainers1 = document.getElementById('text1').querySelectorAll('span');
  const textContainers2 = document.getElementById('text2').querySelectorAll('span');

  function addHighlight(index) {
    textContainers1[index].classList.add('highlight');
    textContainers2[index].classList.add('highlight');
  }

  function removeHighlight(index) {
    textContainers1[index].classList.remove('highlight');
    textContainers2[index].classList.remove('highlight');
  }

  textContainers1.forEach((paragraph1, index) => {
    paragraph1.addEventListener('mouseover', () => {
      if (textContainers2[index].innerHTML.trim() === '' || textContainers1[index].innerHTML.trim() === '') {
        textContainers1[index].classList.add('highlight-empty');
        textContainers2[index].classList.add('highlight-empty');
      }
      addHighlight(index);
    });

    paragraph1.addEventListener('mouseout', () => {
      removeHighlight(index);
      textContainers2[index].classList.remove('highlight-empty');
    });
  });

  textContainers2.forEach((paragraph2, index) => {
    paragraph2.addEventListener('mouseover', () => {
      if (textContainers2[index].innerHTML.trim() === '' || textContainers1[index].innerHTML.trim() === '') {
        textContainers1[index].classList.add('highlight-empty');
        textContainers2[index].classList.add('highlight-empty');
      }
      addHighlight(index);
    });

    paragraph2.addEventListener('mouseout', () => {
      removeHighlight(index);
      textContainers1[index].classList.remove('highlight-empty');
    });
  });
});

body {
  display: flex;
}

.text-container {
  flex: 1;
  margin: 10px;
  border: 1px solid #ccc;
  padding: 10px;
  overflow-y: scroll;
  max-height: 300px;
}

.highlight {
  background-color: yellow;
}

.highlight.highlight-empty {
  background-color: #8eff8e;
  /* Couleur verte pour le surlignage */
}

<body>
  <div class="text-container" id="text1">
    <span>span1.</span> common text
    <span>span 2.</span>
    <span></span>
  </div>
  <div class="text-container" id="text2">
    <span>corresponding span 1.</span> common text
    <span>corresp span 2</span>
    <span>add => empty span on the other side</span>
  </div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Textes en Parallèle</title>

<style>
body {
    display: flex;
}

.text-container {
    flex: 1;
    margin: 10px;
    border: 1px solid #ccc;
    padding: 10px;
    overflow-y: scroll;
    max-height: 300px;
}

.highlight {
    background-color: yellow;
}

.highlight-empty {
       background-color: #8eff8e; /* Couleur verte pour le surlignage */
   }

</style>

</head>
<body>
    <div class="text-container" id="text1">
        <!-- first version of the text -->
        <span>span1.</span> common text
        <span>span 2.</span>
        <span></span>
        <span>span4</span>
    </div>
    <div class="text-container" id="text2">
        <!-- second version of the text -->
        <span>corresponding span 1.</span> common text
        <span>corresp span 2</span>
        <span>add => empty span on the other side</span>
        <span></span>
    </div>
    <script>

    document.addEventListener('DOMContentLoaded', function () {
        const textContainers1 = document.getElementById('text1').querySelectorAll('span');
        const textContainers2 = document.getElementById('text2').querySelectorAll('span');

        function addHighlight(index) {
            textContainers1[index].classList.add('highlight');
            textContainers2[index].classList.add('highlight');
        }

        function removeHighlight(index) {
            textContainers1[index].classList.remove('highlight');
            textContainers2[index].classList.remove('highlight');
        }

        textContainers1.forEach((paragraph1, index) => {
            paragraph1.addEventListener('mouseover', () => {
                if (textContainers2[index].innerHTML.trim() === '') {
                    textContainers1[index].classList.add('highlight-empty');
                }
                addHighlight(index);
            });

            paragraph1.addEventListener('mouseout', () => {
                removeHighlight(index);
                textContainers1[index].classList.remove('highlight-empty');
            });
        });

        textContainers2.forEach((paragraph2, index) => {
            paragraph2.addEventListener('mouseover', () => {
                if (textContainers1[index].innerHTML.trim() === '') {
                    textContainers2[index].classList.add('highlight-empty');
                }
                addHighlight(index);
            });

            paragraph2.addEventListener('mouseout', () => {
                removeHighlight(index);
                textContainers2[index].classList.remove('highlight-empty');
            });
        });
    });

    </script>
</body>

</html>

##In this case we only need to add class and the condition to highlight different span in case of any of corresponding span is empty ##

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Textes en Parallèle</title>

<style>
body {
    display: flex;
}

.text-container {
    flex: 1;
    margin: 10px;
    border: 1px solid #ccc;
    padding: 10px;
    overflow-y: scroll;
    max-height: 300px;
}

.highlight-different {
    background-color: red !important;
}

.highlight {
    background-color: yellow;
}

.highlight-empty {
       background-color: #8eff8e; /* Couleur verte pour le surlignage */
   }

</style>

</head>
<body>
    <div class="text-container" id="text1">
        <!-- first version of the text -->
        <span>span1.</span> common text
        <span>span 2.</span>
        <span>   </span>
    </div>
    <div class="text-container" id="text2">
        <!-- second version of the text -->
        <span>corresponding span 1.</span> common text
        <span>corresp span 2</span>
        <span>add => empty span on the other side</span>
    </div>
    <script>

    document.addEventListener('DOMContentLoaded', function () {
        const textContainers1 = document.getElementById('text1').querySelectorAll('span');
        const textContainers2 = document.getElementById('text2').querySelectorAll('span');

        function addHighlight(index,different=false) {
            const highlight_type=different?'highlight-different':'highlight';
            textContainers1[index].classList.add(highlight_type);
            textContainers2[index].classList.add(highlight_type);
        }

        function removeHighlight(index) {
            textContainers1[index].classList.remove('highlight');
            textContainers2[index].classList.remove('highlight');
            textContainers1[index].classList.remove('highlight-different');
            textContainers2[index].classList.remove('highlight-different');
        }

        textContainers1.forEach((paragraph1, index) => {
            paragraph1.addEventListener('mouseover', () => {
                if (textContainers2[index].innerHTML.trim() === '') {
                    addHighlight(index,true);
                    // textContainers2[index].classList.add('highlight-empty');
                }
                addHighlight(index);
            });

            paragraph1.addEventListener('mouseout', () => {
                removeHighlight(index);
                // textContainers2[index].classList.remove('highlight-empty');
            });
        });

        textContainers2.forEach((paragraph2, index) => {
            paragraph2.addEventListener('mouseover', () => {
                if (textContainers1[index].innerHTML.trim() === '') {
                    // textContainers1[index].classList.add('highlight-empty');
                    addHighlight(index,true);
                    
                }
                addHighlight(index);
            });

            paragraph2.addEventListener('mouseout', () => {
                removeHighlight(index);
                // textContainers1[index].classList.remove('highlight-empty');
            });
        });
    });

    </script>
</body>

</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Javascript – Highlighting corresponding spans, and add an other color when one of them is empty

Answers