Using a button to display different texts using javascript

Question

I want to use a button to display a text with the styles and to revert to the original text when I click the button again. I have done the first part which is to display the text but I cant revert back to the original text. This is what I have so far:

function myFunction() {
  document.getElementById("second").innerHTML = "Hello Javascript";
  document.getElementById("second").style.fontSize = "25px";
  document.getElementById("second").style.color = "red";
}

<button type="button" onclick="myFunction()">Click here</button>
<p id="second">This is me</p>

its cleaner to just toggle a class https://stackoverflow.com/questions/18880890/how-do-i-toggle-an-elements-class-in-pure-javascript — Lawrence Cherone, Oct 06 '22 at 15:13

Mohamed Drira · Answer 1 · 2022-10-06T16:09:30.433

0

you can switch from a class to another using toogle to change the style like this :

document.getElementById("second").classList.toggle("mystyle");

and you keep inner-html to change the text like this:

if (document.getElementById("second").innerHTML === "Click here") 
{
     document.getElementById("second").innerHTML = "Hello Javascript";
} else {
     document.getElementById("second").innerHTML = "Click here";
}

edited Oct 06 '22 at 16:09

answered Oct 06 '22 at 15:20

Mohamed Drira

52
1
7

how will that revert back the text ? – UmairFarooq Oct 06 '22 at 15:25
toggle allows us to add and remove a class in any tag, if the class is not assigned then it will add it otherwise it will remove it – Mohamed Drira Oct 06 '22 at 15:28
i know that but how will you change the text by changing the class – UmairFarooq Oct 06 '22 at 15:57
No, you can only change the style with toogle, you can add a condition in the JS part to change the text and keep the toogle for the style, i'm updating the answer – Mohamed Drira Oct 06 '22 at 16:06

score 0 · Answer 2 · answered Oct 06 '22 at 15:23

Declaring a a variable let count = 1; outside the function which will help me to check the state i am in currently in.so first i assigned the value of 1 to it.

in my function i am saying is count is equal to 1 change it to Hello Javascript with other properties and change count to zero.so when you click the next time count is now zero and the first if gets rejected instead it goes to the second if else condition and makes it this is me and changes count to 1 this time.

basically changing the text with count as a statemanagement.

let count = 1;

function myFunction() {

  if (count == 1) {
    document.getElementById("second").innerHTML = "Hello Javascript";
    document.getElementById("second").style.fontSize = "25px";
    document.getElementById("second").style.color = "red";
    count = 0;
  } else if (count == 0) {
    document.getElementById("second").innerHTML = "This is me";
    document.getElementById("second").style.fontSize = "16px";
    document.getElementById("second").style.color = "black";
    count = 1;
  }

}

<button type="button" onclick="myFunction()">Click here</button>
<p id="second">This is me</p>

score 0 · Answer 3 · answered Oct 06 '22 at 15:27

perhaps using sequence style

const sequence = [
   ['This is me', '20px', 'blue'],
   ['Hello Javascript', '25px', 'red'],
   ['stackoverflow', '50px', 'green'],
];
let index = 0;
function myFunction() {
  const element = document.getElementById("second");

  element.innerText = sequence[index][0];
  element.style.fontSize = sequence[index][1];
  element.style.color = sequence[index][2];

  // increment the index then wrap index to the start when needed
  index = (index + 1) % sequence.length;
}
 // intialize
myFunction();

Mtdt · Answer 4 · 2022-10-06T15:41:44.387

You should store the button style somewhere, and you should store your element reference, interrogating the DOM is performance consuming. You can get compute styles with window.getComputedStyle(element) Something like

const buttonRef = document.getElementById("second")

const buttonDefaultStyle = window.getComputedStyle(buttonRef)
const isDefaultStyle = true
let buttonInnerHTML = "text"

function myFunction() {
  if (isDefaultStyle) {
    buttonRef.innerHTML = "Hello Javascript";
    buttonRef.style.fontSize = "25px";
    buttonRef.style.color = "red";
    isDefaultStyle = false;
  } else {
    buttonRef.innerHTML = buttonInnerHTML;
    buttonRef.style.fontSize = buttonDefaultStyle.fontSize;
    buttonRef.style.color = buttonDefaultStyle.color;
    isDefaultStyle = true;
  }
}

score 0 · Answer 5 · answered Oct 06 '22 at 15:34

One way to do so would be to toggle your styles on the element. The code to do so is given below.

function myFunction() {
  document.getElementById("second").classList.toggle("mystyle");
}

.mystyle {
  font-size: 25px;
  color: red;
}

<button type="button" onclick="myFunction()">Click here</button>
    <p id="second">This is me</p>

score 0 · Answer 6 · answered Oct 06 '22 at 15:40

<!DOCTYPE html>
<html>

<script>
    var count = 0;

    function myFunction() {
        count += 1;

        if (count % 2 > 0) {
            document.getElementById("second").style.fontSize = "25px";
            document.getElementById("second").style.color = "red";
            document.getElementById("second").innerText = "Hello Javascript";
        } else if (count % 2 == 0) {
            document.getElementById("second").style.fontSize = "15px";
            document.getElementById("second").style.color = "black";
            document.getElementById("second").innerText = "This is me";
        }



    }
</script>


<body>
    <button type="button" onclick="myFunction()">Click here</button>
    <p id="second">This is me</p>

</body>

</html>

score 0 · Answer 7 · answered Oct 06 '22 at 16:08

You have to pardon me, as I'm still learning JS, but I thought i'd give it a try as an exercise. There are probably simpler ways to do this, but this is what I came up with.

For a faux 'boolean', if you will, you can go through even and odd numbers with a counter increasing each time you press the button. If left to its own devices, a counter will go to infinity, so adding an if clause (or a case switch, could be either), for the counter if it goes above a certain number will keep it reasonable.

Rather than adding font styles, I think it would be easier to toggle between classes, that way you can just edit the CSS instead of having to go change JS every time you want to change the output style of one of the states.

Using an event listener instead of an onclick assigned to the html Button tag will allow the function to count up the clicks, because essentially the function is continually running instead of just firing once every time the button is clicked.

let counter = 0; //establishing the counter

button.addEventListener("click", function() { //using an event listener instead of an onclick event allows the function to continually run instead of firing once each time the button is clicked

    let button = document.querySelector("#button"); 
    let print1 = 'Goodbye Foo'; //making the change state the first state assigned by the click means that the content will in fact change the first time you click the button, which took me a hot second to figure out
    let print2 = 'Hello World';
    let printer = document.getElementById('second');
    if (counter % 2 == 0) { //if the counter, when divided by two has a remainder of 0
        printer.innerHTML = print1; //then print "print1" as the inner html
        printer.classList.replace('print2', 'print1'); //and toggle the classes
    } else { //else, if the remainder of the counter divided by 2 is not zero
        printer.innerHTML = print2; //print the other state
        printer.classList.replace('print1', 'print2'); //and replace the css

    }
    if (counter >= 9) { //if the counter ever gets to 9 (an odd number)
        counter = 0; //then restart the counter at zero (which gives a remainder of 0, making it "even" in this case
    } else {
        counter++; //otherwise count up one each time the button is pressed
    }
});

.print1 {
    color: red;
    font-size: 24px;
}

.print2 {
    color: blue;
    font-size: 12px;
}

<button id="button" type="submit">
Click me
</button>
<p id="second" class="print2">
Hello World
</p>

here it is in jsfiddle:

https://jsfiddle.net/slingtruchoice/wkt3pz9v/

score 0 · Answer 8 · answered Oct 11 '22 at 08:32

I eventually used this and it worked perfectly fine for me. it also changed the text on the button as well.

 let count = 1;
    function mySecond() {
        if (count == 1) {
            document.getElementById("button3").innerHTML = "Hello Javascript";
           document.getElementById("button3").classList.toggle("myStyle");
            document.getElementById("button2").innerHTML = "Back";
            count = 0;
        } else if (count == 0) {
            document.getElementById("button3").innerHTML = "This is the best";
            document.getElementById("button3").classList.toggle("myStyle");
            document.getElementById("button2").innerHTML = "Start";
            count = 1;
        }
    }
<button id="button2" onclick="mySecond()">Start</button>
<p id="button3">This is the best</p>

 .myStyle {
        color: brown;
    }

Using a button to display different texts using javascript

8 Answers8