Javascript-在每个按钮上单击更改段落文本 [英] Javascript - change paragraph Text on Each Button Click
问题描述
我正在尝试创建3个按钮，并使用javascript，如果单击了按钮1，则它将单击按钮"文本更改为您按下了按钮1"
I am trying to create 3 buttons, and using javascript, If button 1 is clicked then it changes the "Click a button" text to "You pressed Button 1"
与按钮2和3相同！如果按下按钮3，则文本颜色将变为绿色
但是，我似乎无法使它正常工作！任何帮助将不胜感激
However, I can't seem to get it to work! Any help would be appreciated
这是我当前的代码:
<!DOCTYPE html>
<html>
<head>
<title>Button</title>
</head>
<body>
<script type="text/javascript">
function changeText() {
var b1 = document.getElementById('b1');
var b2 = document.getElementById('b2');
var b3 = document.getElementById('b3');
if(b1.onclick="changeText();") {
document.getElementById('pText').innerHTML = "You pressed button 1";
}
if(b2.onlick="changeText();") {
document.getElementById('pText').innerHTML = "You pressed Button 2";
}
}
</script>
<input type="button" value="Button 1" id="b1" onclick="changeText();"/>
<input type="button" value="Button 2" id="b2" onclick="changeText();"/>
<input type="button" value="Button 3" id="b3" onclick="changeText();"/>
<p id="pText">Click on a Button</p>
</body>
</html>
推荐答案
您可以尝试以下操作:
<!DOCTYPE html>
<html>
<head>
<title>Button</title>
</head>
<body>
<script type="text/javascript">
function changeText(value) {
document.getElementById('pText').innerHTML = "You pressed " + value;
}
</script>
<input type="button" value="Button 1" id="b1" onclick="changeText(this.value);"/>
<input type="button" value="Button 2" id="b2" onclick="changeText(this.value);"/>
<input type="button" value="Button 3" id="b3" onclick="changeText(this.value);"/>
<p id="pText">Click on a Button</p>
</body>
</html>
您要做的是每单击一次按钮，就会调用 onlick(); 函数，其中包含您刚刚单击的按钮元素的值.现在，所有 changeText(); 函数都需要编辑要编辑的元素的innerHTML.直接.
Here what you are doing is whenever you click the button, the onlick(); function is being called containing the value of the button element you just clicked. All the changeText(); function has to do now is edit the innerHTML of the element you want to edit. Directly.
希望这会有所帮助.
更新的代码:(以反映您更新的参数)
UPDATED Code: (To reflect your updated parameters)
<!DOCTYPE html>
<html>
<head>
<title>Button</title>
</head>
<body>
<script type="text/javascript">
function changeText(value) {
document.getElementById('pText').innerHTML = "You pressed " + value;
if(value == "Button 3")
{
document.getElementById('pText').setAttribute('style', 'color: green');}
}
</script>
<input type="button" value="Button 1" id="b1" onclick="changeText(this.value);"/>
<input type="button" value="Button 2" id="b2" onclick="changeText(this.value);"/>
<input type="button" value="Button 3" id="b3" onclick="changeText(this.value);"/>
<p id="pText">Click on a Button</p>
</body>
</html>
这篇关于Javascript-在每个按钮上单击更改段落文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
