CODEWITHSUNDEEP
javascripthtml
Prince Brown
Prince Brown

Reputation: 19

Still Not Working.. Swapping .innerHTML with .js variable

When the user visits the page, this HTML text must display. 

<p id="exampleText">Hit The "Change Text" Button Below To Change <span id="thisText"><strong>This</strong></span> Text and see how the innerHTML property tag works </p>

After clicking this button:

<button id="changeButton" type="button" value="default Text" onclick="textChanger()">Change Text</button>

Display This Text: 

var txtExmp1 = "Hooooooooooooraayy!!, You Clicked and Changed The Text..." + "<br><br><br>" + "but now you have to fix me so i can change again";

Now user should be able to click the button and see previous text and back to the "Hooray" message in var txtExmp1.

I've tried to use an if statement but didnt work. Here's the code: 

var defaultText = document.getElementById("exampleText");

      if (defaultTex.innerHTML === defaultText){
          defaultText.innerHTML = txtExmp1;
      }  
      else {
          defaultText.innerHTML = defaultText;
      }

How can I make this texts toggle between each other considering one is html and the other is javascript. What is the simple and most effective way to toggle this texts?

Heres what it looks like (Screenshot image): i.Before Click ii.After click, but wont change again

Upvotes: 0

Views: 70

Answers (2)

A. Meshu
A. Meshu

Reputation: 4148

The word you are searching is toggle. Try switch case:

var theToggle = document.getElementById("changeButton");
var toggleMe = document.getElementById("exampleText"); 
toggleMe.toggleStatus = "on";

theToggle.onclick = function(){
  switch(toggleMe.toggleStatus){
    case "on":
      toggleMe.toggleStatus="off";
      toggleMe.textContent = "Hooooooooooooraayy";
      break;
    case "off":
      toggleMe.toggleStatus="on";
      toggleMe.textContent = " Hit The Change Text Button Below To change...";
      break;
  }

Good luck!

Upvotes: 0

user7148391
user7148391

Reputation:

This is relatively simple, when changing the text you need to take the current visible one and save it in a variable, then show the other stored text you have in txtExmp1 then when the use click again you take the other visible text store it and show the one you stored before, doing it this is highly inefficient.

From the start you store both strings in variables or array then toggle between them.

Of course this is just one way to achieve this.

let text = ["Hooooooooooooraayy!!, You Clicked and Changed The Text... <br><br><br>but now you have to fix me so i can change again", "Hit The Change Text Button Below To Change <span id='thisText '><strong>This</strong></span> Text and see how the innerHTML property tag works "];
let index = 0;

function textChanger() {
  // Get the p Element refrence so we can modify it
  var pElement = document.getElementById("exampleText");
  // text[index] will return one of the texts from the array
  // depening on the index if 0 its the first one
  // if 1 it's the second one
  // that's why we're altering index's value after every change
  
  if (index == 0) {
    pElement.innerHTML = text[index];
    index = 1;
  } else if (index == 1) {
    pElement.innerHTML = text[index];
    index = 0;
  }
}
<p id="exampleText">Hit The Change Text Button Below To Change <span id='thisText '><strong>This</strong></span> Text and see how the innerHTML property tag works </p>

<button id="changeButton" type="button" value="default Text" onclick="textChanger()">Change Text</button>

Upvotes: 1

Related Questions