Change p text clicking on checkbox

user_14170847 0
Viewed 461

i'm basically trying to change the text on "p" when clicking, but so far I haven't been successful using javascript. Can you guys help me?

<div class="switch">
<h2>Switch Text</h2>
<div class="switch-button">
    <input class="switch-button-checkbox" type="checkbox"></input>
    <label class="switch-button-label" for="">
      <span class="switch-button-label-span">Click Here!</span></label>
  </div>
    <p>Change this. <br>Change this. </p>
html javascript
3 Answers

The main way to interact/change a webpage is to use javascript. In this example, the onclick attribute of the button is set to call a function that turns sets the text of all elements with the given classname to an input text, in this case "This has been changed".

At your request, I've updated it to allow the text to turn back to it's initial value. This is by adding a parameter that the element will be set to if it is currently the value it should be changed to on the first click

<html>
  <body>
    <div class="switch">
      <h2>Switch Text</h2>
      <div class="switch-button">
          <input class="switch-button-checkbox" type="checkbox" onclick="changeText('textToChange','This has been changed','<p class=\'textToChange\'>Change this. <br>Change this. </p>')">
          <label class="switch-button-label" for="">
            <span class="switch-button-label-span" onclick="changeText('textToChange','This has been changed','<p class=\'textToChange\'>Change this. <br>Change this. </p>')">Click Here!           </span>
          </label>
      </div>
      <p class="textToChange">Change this. <br>Change this. </p>
    </div>
    <script>
    function changeText(classToChange,textToChangeTo,initalText){
      var ElementsToChange = document.getElementsByClassName(classToChange);
      Array.from(ElementsToChange).forEach( (element) =>{
        if(element.innerHTML!= textToChangeTo){
          element.innerHTML=textToChangeTo;
          element.style.color="blue";
          element.style.fontSize="150%";
          document.getElementsByClassName("switch-button-checkbox")[0].checked=true;
        }
        else{
          element.innerHTML=initalText;
          element.style.color="black";
          element.style.fontSize="100%";
          
          document.getElementsByClassName("switch-button-checkbox")[0].checked=false;
        }
      });
    }
    </script>
  </body>
</html>

user_159208360

Listen for the change event.

Also, for your label to work, you need to assign an id to the input and use that same id for the for attribute in your label. 

checkbox.addEventListener('change', function(){
  document.querySelector('p').textContent = "changed";
})
<div class="switch">
<h2>Switch Text</h2>
<div class="switch-button">
    <input class="switch-button-checkbox" type="checkbox" id="checkbox">
    <label class="switch-button-label" for="checkbox">
      <span class="switch-button-label-span">Click Here!</span></label>
  </div>
    <p>Change this. <br>Change this. </p>

user_142512210

You can use the onclick event

for more information check this article https://errorsea.com/how-to-change-text-onclick-event-javascript/

function change_text(){
    document.getElementById("demo").innerHTML = "This is my text changed.";
}
<div class="switch">
<h2>Switch Text</h2>
<div class="switch-button">
    <input class="switch-button-checkbox" onclick="change_text()" type="checkbox"></input>
    <label class="switch-button-label" for="">
      <span class="switch-button-label-span" onclick="change_text()"  >Click Here!</span></label>
  </div>
    <p id="demo">Change this. <br>Change this. </p>

user_139905930
Related