Question

解决此问题的最佳方法是什么？如果您单击一个按钮，则需要两个按钮来显示两个不同的消息。然后在单击时用另一个文本替换按钮。有什么好撒玛利亚人愿意帮助我吗？我是javascript新手，只是来过这个：

<!DOCTYPE HTML>
<html>
<head>
<title>JavaScript Hello World</title>
</head>
<body>
<div> Text 0 </div>
<input type="button" id="toggler" value="Toggler" onClick="action();" />
<input type="button" id="togglee" value="Togglee" />
 <script type="text/javascript">
    var hidden = false;
    function action() {
        hidden = !hidden;
        if(hidden) {
            document.getElementById('togglee').style.visibility = 'hidden';
        } else {
            document.getElementById('togglee').style.visibility = 'visible';
        }
    }

 function hideAll(){
     document.getElementById("id1").style.display="none";
     document.getElementById("id2").style.display="none";
     document.getElementById("id3").style.display="none";    
}
function show(elementId) { 
    hideAll();
    document.getElementById(elementId).style.display="block";
}
</script>
<div id="id1">text 1</div>
<div id="id2">text 2</div>
<div id="id3">text 3</div>

<button type="button" onclick="show('id1');">Choice 1</button>
<button type="button" onclick="show('id2');">Choice 2</button>
<button type="button" onclick="show('id3');">Choice 3</button>



<script type="text/javascript">
    hideAll();
</script>

</body>
</html>

Answer 1

这里是单击按钮时更改按钮文本的示例。您可以通过执行以下操作轻松定位其他目标，例如显示：

const button1 = document.querySelector('#button1');
const button2 = document.querySelector('#button2');
const hideButtons = document.querySelector('#hideButtons');
const showButtons = document.querySelector('#showButtons');
let btn1Count = 0;
let btn2Count = 0;
button1.onclick = (evt) => {
	btn1Count++;
	button1.innerText = `Click Count ${btn1Count}`;
};

button2.onclick = (evt) => {
	btn2Count++;
	button2.innerText = `Click Count ${btn2Count}`;
};
hideButtons.onclick = () => {
	button1.style.display = 'none';
  button2.style.display = 'none';
}
showButtons.onclick = () => {
	button1.style.display = 'block';
  button2.style.display = 'block';
}

<button id="button1">
 Button 1
</button>
<button id="button2">
Button 2
</button>
<button id="hideButtons">
 Hide Buttons
 </button>
 <button id="showButtons">
 Show Buttons
 </button>

更改文字并在javascript中单击按钮后替换按钮/文本？

1 个答案: