Change text inside a button on each click using javascript?

Question

I need to change text each time I click on button.

var button = document.getElementById("changeText");
button.addEventListener(
"click",
function () {
    if (button.getAttribute("data-text") == button.innerHTML) {
        button.innerHTML = button.getAttribute("data-text1");
    } else {
        button.setAttribute("data-text1", button.innerHTML);
        button.innerHTML = button.getAttribute("data-text");
    }
},
false
);

<div>
<button id="changeText" data-text="Show" data-text1="Hide">Hide</button>
</div>

I don't understand why this code doesn't work when I try to load page using google chrome. However when I loaded it to codepen it worked

You shouldn't make up your own attributes. If you need custom data, use data-XXX attributes. — Barmar
– Barmar, Commented Apr 30, 2021 at 16:26
Are there any errors in the console when you run it on your real web page? — Barmar
– Barmar, Commented Apr 30, 2021 at 16:29

nesmeyana · Accepted Answer · 2021-04-30 16:29:36Z

2

It expects from you certain structure like this one:

<!DOCTYPE html>  
<html>
    <head>
        <title>
              
        </title>
    </head>
      
    <body>
        <div>
            <button id="changeText" text="Show" >Hide</button>
        </div>

        <script>
            var button = document.getElementById("changeText");
button.addEventListener(
    "click",
    function () {
        if (button.getAttribute("text") == button.innerHTML) {
            button.innerHTML = button.getAttribute("text1");
        } else {
            button.setAttribute("text1", button.innerHTML);
            button.innerHTML = button.getAttribute("text");
        }
    },
    false
);
        </script>
    </body>
</html>

Copy paste it to your file and you'll see that it works. Please mark it as an answer if it fixes your problem :)

answered Apr 30, 2021 at 16:29

nesmeyana

2061 gold badge2 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user14388485 Over a year ago

it works, but i have two separate files .HTML and .js and it doesn't work that way

nesmeyana Over a year ago

Try to check correctness of your js path. Are there any other errors?

user14388485 Over a year ago

no other errors, the path is <script defer src="part2.js"></script>

nesmeyana Over a year ago

Make sure that your script is located inside body tag, also check if your .js script is in the same folder where your .html file is. I have just separated that piece of code that I posted to 2 different files (.js and .html) in the same folder and it still works.

Bulent · Accepted Answer · 2021-04-30 16:36:52Z

0

Your code is working, but your approach is not so nice. See the 2 options down below.

let text = {
 'Hide': 'Show',
 'Show': 'Hide'
}

const click = (event) => {
  // option 1, it needs the object above.
  // It's good for multiple alternatiosn like color, icon etc
  // or multiple states like hide to show, show to sure, sure to really, really to hide. 
  event.target.innerText = text[event.target.innerText];
  
  // option 2, it's good for one or two alternations.
  // event.target.innerText = event.target.innerText == 'Hide' ? 'Show' : 'Hide'
}

document.querySelector('button').addEventListener('click', click);

<button>Show</button>

edited Apr 30, 2021 at 16:36

answered Apr 30, 2021 at 16:31

Bulent

3,4411 gold badge19 silver badges25 bronze badges

Comments

Rahul Kumar · Accepted Answer · 2021-04-30 16:38:41Z

you can make it more simple by removing the custom attribute and use the button innerHTML only along with enum by using Object.freeze(),it will make the code more readable

const titleEnum = Object.freeze({show: "SHOW",  hide: "HIDE"});
var button = document.getElementById("changeText");
button.addEventListener(
    "click",
    function () {
        if (button.innerHTML === titleEnum.hide) {
            button.innerHTML = titleEnum.show;
        } else {
            button.innerHTML = titleEnum.hide;
        }
    },
    false
);

<!DOCTYPE html>  
<html>
    <head>
        <title>
              
        </title>
    </head>
      
    <body>
        <div>
            <button id="changeText">HIDE</button>
        </div>
    </body>
</html>

Daniel · Accepted Answer · 2021-04-30 16:45:05Z

0

Use innerText to get the value of an element

const changeBtn = document.getElementById("changeText");
changeBtn.addEventListener("click", ()=>{
    if(changeBtn.innerText === "2"){
        changeBtn.innerText = "1";
    }
    else{
        changeBtn.innerText= "2";
    }
});

<div>
    <button id="changeText">1</button>
</div>

answered Apr 30, 2021 at 16:45

Daniel

611 silver badge6 bronze badges

Collectives™ on Stack Overflow

Change text inside a button on each click using javascript?

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related