javascript - How to change Title of a HTML button

I want to Change the title of a HTML button once clicked. this is what I tried.

HTML

<button class="fullScreen" data-dojo-type="dijit.form.Button" onclick="FullScreenToggle(this);" id="butFullScreen">
<input type="image" class="ns" onclick="FullScreenToggle(this);" title="Full Screen" value="" />

if (document.getElementById("butFullScreen").title == "Full Screen") {
    document.getElementById("butFullScreen").title = "";
    document.getElementById("butFullScreen").title = "Normal Screen";
} else document.getElementById("butFullScreen").title = "Full Screen";

When I do this Title doesn't change in JavaScript call. then I tried using title="" in HTML, then title changes on Java Script call. but when button is loaded first time I dont have a title. I want have Full Screen as title when button is loaded and then toggle it between Normal Screen & Full Screen on each click.

Once I set title="Full Screen" in my HTML, a JavaScript call doesn't change it.

I want to Change the title of a HTML button once clicked. this is what I tried.

HTML

<button class="fullScreen" data-dojo-type="dijit.form.Button" onclick="FullScreenToggle(this);" id="butFullScreen">
<input type="image" class="ns" onclick="FullScreenToggle(this);" title="Full Screen" value="" />

if (document.getElementById("butFullScreen").title == "Full Screen") {
    document.getElementById("butFullScreen").title = "";
    document.getElementById("butFullScreen").title = "Normal Screen";
} else document.getElementById("butFullScreen").title = "Full Screen";

Once I set title="Full Screen" in my HTML, a JavaScript call doesn't change it.

Share Improve this question edited Jul 21, 2022 at 16:15 TylerH 21.1k77 gold badges79 silver badges112 bronze badges asked Aug 29, 2013 at 6:19 DbxD 5503 gold badges15 silver badges29 bronze badges

1 Side note: this HTML snippet is not valid since you aren't closing the <button> tag. While browsers are designed to fix invalid HTML, there's no guarantee that all browsers will apply the same fixes. Producing 100% valid HTML will save you some headaches. – Álvaro González Commented Aug 29, 2013 at 6:27

Add a comment |

6 Answers 6

Sorted by: Reset to default 3

u need to call a function onload site Execute a JavaScript when a page is finished loading:

In HTML:

<body onload="FullScreenToggle();">

In JavaScript:

window.onload=function(){FullScreenToggle();};

try this In button Click:

 var butn=document.getElementById("butFullScreen").value;
 if(butn=="Full Screen")
     document.getElementById("butFullScreen").value="Normal Screen";
 if(butn=="Normal Screen")
     document.getElementById("butFullScreen").value="Full Screen";

Try this

if (document.getElementById("butFullScreen").getAttribute('title')=="Full Screen"){ 
   document.getElementById("butFullScreen").setAttribute('title',"Normal text");
    }
else
   document.getElementById("butFullScreen").setAttribute('title',"Full Screen");

Give title to your button:

function FullScreenToggle(){
 if (document.getElementById("butFullScreen").title == "Full Screen"){
    document.getElementById("butFullScreen").title = "Normal Screen";
 } else {
    document.getElementById("butFullScreen").title = "Full Screen";
 }

My preference would be to make only 1 document.getElementById call for cleanliness and ease of maintenance. Also, I would use the .title attibute directly.

function FullScreenToggle() {
    var button = document.getElementById("butFullScreen");
    if (button.title == "Full Screen") {
        button.title = "Normal Screen";
    } else {
        button.title = "Full Screen";
    }
}

_{OP's solution migrated from the question to an answer:}

[I] kept the title="" as blank, and called the JavaScript method in the <body onload> method and it worked.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to change Title of a HTML button - Stack Overflow

6 Answers 6

与本文相关的文章

评论列表(0)