如何使用純js更改按鈕內顯示的文本？

我是一個初學者，想知道你們是否可以提供幫助。如何使用純js更改按鈕內顯示的文本？

我在網上看到很多關於使用innerHTML,textContent,value等的東西來改變顯示的標籤文本，但我不能讓它實際上在屏幕上改變。

注意：console.log的確會觸發並在控制檯中顯示正確的內容，但按鈕內容不會在窗口中更改。

這裏是我的html：

<h1 id="myHeading" class="red">JavaScript and the DOM</h1> 
<p>Making a web page interactive</p> 
<button id="myButton">click me</button>

這裏是我的javascript：

const myHeading = document.getElementById('myHeading'); 
const myButton = document.getElementById('myButton'); 
let buttonText = myButton.innerText; 
console.log(buttonText); 

myButton.addEventListener('click', function toggleColor() { 
    let whatClass = myHeading.classList; 


    if (whatClass.contains('red')) { 
    whatClass.remove('red'); 
    whatClass.add('yellow'); 
    buttonText = 'Click me to change text to Red!'; 
    console.log(buttonText); 
    } else if (whatClass.contains('yellow')) { 
    whatClass.remove('yellow'); 
    whatClass.add('red'); 
    buttonText = 'Click me to change text to Yellow!'; 
    console.log(buttonText); 
    } 
});

在此先感謝，並請不要太苛刻！

來源

2017-07-28 A Hanna

你是否明確設置myButton'的'了'innerHTML'屬性，當你設置'buttonText'？ – clabe45

'myButton.innerText'不會給你一個參考值，所以可以通過它進行更新。使用'myButton.innerHTML =「新建按鈕文本」;' – marekful

使用myButton.innerText或myButton.innerHTML

const myHeading = document.getElementById('myHeading'); 
 
const myButton = document.getElementById('myButton'); 
 
let buttonText = myButton.innerText; 
 
//console.log(buttonText); 
 

 
myButton.addEventListener('click', function toggleColor() { 
 
    let whatClass = myHeading.classList; 
 

 

 
    if(whatClass.contains('red')) { 
 
    whatClass.remove('red'); 
 
    whatClass.add('yellow'); 
 
    myButton.innerText = 'Click me to change text to Red!'; 
 
    
 
    } 
 
    else if(whatClass.contains('yellow')) { 
 
    whatClass.remove('yellow'); 
 
    whatClass.add('red'); 
 
    myButton.innerHTML = 'Click me to change text to Yellow!'; 
 
    
 
    } 
 
});

.red{background:red} 
 
.yellow{background:yellow}

<h1 id="myHeading" class="red">JavaScript and the DOM</h1> 
 
<p>Making a web page interactive</p> 
 
<button id="myButton">click me</button>

來源

2017-07-28 01:52:13 ewwink

你必須真正設置文本。 :-)

myButton.innerHTML = buttonText;

哎呀，我在我的腦海中有jQuery！

來源

2017-07-28 01:36:31

'innerHTML'不是函數 – Phil

是的，我最近一直在使用jQuery太多......混淆了它。：-S –

如何使用純js更改按鈕內顯示的文本？

回答

相關問題