javascript 当javascript onclick时在div中显示文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16765292/
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
Display text in div when javascript onclick
提问by user2305807
I've multiple buttons with related text to each button, when user click on the button, the text should change according to button and text should be displayed in the DIV.
我有多个按钮，每个按钮都有相关的文本，当用户点击按钮时，文本应该根据按钮而改变，文本应该显示在 DIV 中。
I'm using if elseif to choose between the text for each button, now I'm unable to go through the function to pass the text to the div onclick().
我正在使用 if elseif 在每个按钮的文本之间进行选择，现在我无法通过该函数将文本传递给 div onclick()。
<html>
<head>
function display (selected) {
if (decision == firstbox) {
display = "the text related to first box should be displayed";
} else if (decision == secondbox) {
display = "Text related to 2nd box.";
} else {
display ="blank";
}
</head>
<body>
<input type="button" id="firstbox" value= "firstbox" onclick="display(firstbox)" /><br>
<input type="button" id="secondbox" value= "secondbox" onclick="display(firstbox)" /><br>
</body>
</html>
回答by Francisco Presencia
Pure javascript from your code:
来自您的代码的纯 javascript：
function display (selected)
{
if (selected == 'firstbox')
{
texttoshow = "the text related to first box should be displayed";
}
else if (selected == 'secondbox')
{
texttoshow = "Text related to 2nd box.";
}
document.getElementById("thetext").innerHTML = texttoshow;
}
And the html:
和 html：
<body>
<div id = "thetext"></div>
<button onclick = "display(firstbox)">Firstbox</button>
<button onclick = "display(secondbox)">Secondbox</button>
</body>
For what is worth it, in jQuery (a javascript framework):
对于什么是值得的，在 jQuery（一个 javascript 框架）中：
$("#buttonclicked").
click(function(){
$("#yourdiv").
html("Your text");
});
回答by Leandro Villagran
This should do what you want
这应该做你想做的
<button type="button" id="button-test">Text that will apear on div</button>
<div id="content">
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#button-test').click(function(){
$('#content').text($(this).text());
});
});
</script>
http://remysharp.com/2007/04/12/jquerys-this-demystified/
回答by S. Mayol
Here I am going to provide you to examples in one. One of them use divand the other don't, one using a link and the other using a button that need to be clicked.
在这里，我将为您提供一个示例。其中一个使用div，另一个不使用，一个使用链接，另一个使用需要单击的按钮。
<!DOCTYPE html>
<html>
<body>
<h2>Displaying text when clicked</h2>
<button type="button"
onclick="document.getElementById('demo').innerHTML = 'These are the steps to get your PIN number: Bla bla bla'">
PIN button:</button>
<p id="demo"></p>
</br></br></br>
<a onclick="showText('text1')" href="javascript:void(0);">PIN link:</a>
<script language="JavaScript">
function showText(id)
{
document.getElementById(id).style.display = "block";
}
</script>
<div id="text1" style="display:none;">These are the steps to get your PIN number: Bla bla bla</div>
</body>
</html>
