如何使用纯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更改按钮内显示的文本？

回答

相关问题