Javascript - 在每个按钮单击上更改段落文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29803850/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript - change paragraph Text on Each Button Click
提问by GDesigns
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"
我正在尝试创建 3 个按钮，并使用 javascript，如果单击按钮 1，则它将“单击按钮”文本更改为“您按下了按钮 1”
Same for Button 2 and 3! And if Button 3 is pressed, the text colour changes to GREEN
按钮 2 和 3 相同！如果按下按钮 3，文本颜色变为绿色
However, I can't seem to get it to work! Any help would be appreciated
但是，我似乎无法让它工作！任何帮助，将不胜感激
Here is my Current Code:
这是我当前的代码：
<!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>
回答by shadoweye14
You can try this:
你可以试试这个：
<!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>
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.
在这里，您所做的是每当您单击按钮时，onlick();都会调用包含您刚刚单击的按钮元素值的函数。changeText();现在该函数要做的就是编辑要编辑的元素的innerHTML。直接地。
Hope this helps.
希望这可以帮助。
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>
回答by Vijay
Try this:
尝试这个：
<html>
<head>
<title>Button</title>
</head>
<body>
<script type="text/javascript">
function changeText(text) {
document.getElementById('pText').innerHTML=text;
}
</script>
<input type="button" value="Button 1" id="b1" onclick="changeText('You pressed Button 1');"/>
<input type="button" value="Button 2" id="b2" onclick="changeText('You pressed Button 2');"/>
<input type="button" value="Button 3" id="b3" onclick="changeText('You pressed Button 3');"/>
<p id="pText">Click on a Button</p>
</body>
</html>
回答by Saurabh
Your code is perfect. But the problem is that both the if loops are executing sequentially so fast that you can't see when the first text gets converted to second text. Try inserting an alert between two calls.
你的代码是完美的。但问题是两个 if 循环顺序执行得如此之快，以至于您看不到第一个文本何时转换为第二个文本。尝试在两个呼叫之间插入警报。
回答by jlindenbaum
You're close, but no cigar.
你很接近，但没有雪茄。
To properly identify the button you're clicking you should send in thiswith your function call, that way you get a reference to the object that was clicked. Comparing the onclickin an if statement won't work well, as it's a function pointer, not a string.
要正确识别您单击的按钮，您应该this随函数调用一起发送，这样您就可以获得对被单击对象的引用。比较onclickif 语句中的 效果不佳，因为它是函数指针，而不是字符串。
Try something like:
尝试类似：
<input type="button" value="Button 1" id="b1" onclick="changeText(this);"/>
And your changeText()should now be something like this. You can use this example, but you'll have to figure out the rest on your own. This should point you in the right direction though.
你changeText()现在应该是这样的。您可以使用此示例，但您必须自己弄清楚其余部分。不过，这应该为您指明正确的方向。
function changeText(elementClicked) {
var button1 = document.getElementById('b1');
if (elementClicked == button1) {
// button 1 was clicked
}
}
