JS not working after Checkbox if else condition for breaking sentences into span letter

user_14755809 0
Viewed 84

i am breaking sentences into <span class="word"> and then <span class='letter'> through this simple js and its working demo:

<h1 id="text">
this is demo text that is breaking word into span letter
</h1>

<style>
.word {border: 1px solid red;}
.letter {border: 1px solid lightblue;}
</style>

<script>
var textWrapper = document.querySelector('#text');
textWrapper.innerHTML = textWrapper.textContent.replace(/(\S*)/g, m => {
  return `<span class="word">` +
    m.replace(/(-|)?\S(-|@)?/g, "<span class='letter'>$&</span>") +
    `</span>`;
});

</script>

But now i want that sentences should be break into <span class="word"> and then <span class='letter'> only if when Checkbox is active else this is not should be break.

i tried these code but it's not working, what mistake am making can i know plz stackoverflow community.


<label for="myCheck">Checkbox:</label> 
<input type="checkbox" id="myCheck" onclick="myFunction()">

<h1 id="text" >Checkbox is CHECKED!</h1>

<script>
function myFunction() {
  var checkBox = document.getElementById("myCheck");
  var textWrapper = document.querySelector('#text');
  if (checkBox.checked == true){
    textWrapper.innerHTML = textWrapper.textContent.replace(/(\S*)/g, m => {
  return `<span class="word">` +
    m.replace(/(-|)?\S(-|@)?/g, "<span class='letter'>$&</span>") +
    `</span>`;
});
  } else {
     textWrapper.style.display = "block";
  }
}
</script>
css html jquery javascript
3 Answers

Your problem is in this line:-

textWrapper.style.display = "block";

doesn't undo the changes caused by

 textWrapper.innerHTML = textWrapper.textContent.replace(/(\S*)/g, m => {
  return `<span class="word">` +
    m.replace(/(-|)?\S(-|@)?/g, "<span class='letter'>$&</span>") +
    `</span>

because display: block; doesn't negate css. See here.

You should use a similar replace to undo the changes.

A possible solution to your problem is:-

<style>
.word {border: 1px solid red;}
.letter {border: 1px solid lightblue;}
</style>

<label for="myCheck">Checkbox:</label> 
<input type="checkbox" id="myCheck" onclick="myFunction()">

<h1 id="text" >Checkbox is CHECKED!</h1>

<script>
function myFunction() {
  var checkBox = document.getElementById("myCheck");
  var textWrapper = document.querySelector('#text');
  if (checkBox.checked == true){
    textWrapper.innerHTML = textWrapper.textContent.replace(/(\S*)/g, m => {
  return `<span class="word">` +
    m.replace(/(-|)?\S(-|@)?/g, "<span class='letter'>$&</span>") +
    `</span>`;
});
  } else {
     textWrapper.innerHTML = textWrapper.textContent.replace(/(<([^>]+)>)/gi, "");
  }
}
</script>

Note that here

textWrapper.innerHTML = textWrapper.textContent.replace(/(<([^>]+)>)/gi, "");

strips textContent of any html tags.

user_29723300

Hold your original text on some variable and based upon your check box checked replace your text with the original text.

var checkBox = document.getElementById("myCheck");
var textWrapper = document.querySelector('#text');
var orginalText = document.getElementById("text").textContent;

function myFunction(obj) {

  if (checkBox.checked == true) {

    textWrapper.innerHTML = textWrapper.textContent.replace(/(\S*)/g, m => {
      return `<span class="word">` +
        m.replace(/(-|)?\S(-|@)?/g, "<span class='letter'>$&</span>") +
        `</span>`;
    });
  } else {
    document.getElementById('text').innerHTML = orginalText;
  }
}
.word {
  border: 1px solid red;
}

.letter {
  border: 1px solid lightblue;
}
<label for="myCheck">Checkbox:</label>
<input type="checkbox" id="myCheck" onclick="myFunction(this)">

<h1 id="text">Checkbox is CHECKED!</h1>

user_9651460

why you cant try this This is not an optimal solution , but looks like working for your needs

    function myFunction() {
  var checkBox = document.getElementById("myCheck");
  var textWrapper = document.querySelector('#text');
  if (checkBox.checked == true){
    textWrapper.innerHTML = textWrapper.textContent.replace(/(\S*)/g, m => {
  return `<span class="word">` +
    m.replace(/(-|)?\S(-|@)?/g, "<span class='letter'>$&</span>") +
    `</span>`;
});
  } else {
   var oldText = `<h1 id="text">Checkbox is CHECKED!</h1>`
     textWrapper.innerHTML = ""
     textWrapper.innerHTML = oldText
  }
}
user_112078700
Related