javascript 根据文本字符串是否等于特定字符串显示 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16725330/
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
Show div based on if text string equals a specific string
提问by Tyler Roy
I have been looking through all kinds of information to figure out how to do this. What I am looking for is to show a div based on what is entered in a text box within a form. Later I plan on incorporating this into a form we are currently using in Joomla. This is what I have tried, among other things. This is the most basic attempt. Essentially I want this code example to spit out text value depending on what is entered. In this case, if "yes" is entered, it will spit out "Success", and if anything else is entered, it will spit out "No Luck". From there I would like it to actually show a div. But that's for later, I suppose unless anyone knows how to get there from here. With this code, only "No Luck" gets outputted, regardless if you input "Yes". Thank you in advance for any help you might be able to contribute!
我一直在查看各种信息以弄清楚如何做到这一点。我正在寻找的是根据在表单中的文本框中输入的内容显示一个 div。稍后我计划将其合并到我们目前在 Joomla 中使用的表单中。这是我尝试过的，除此之外。这是最基本的尝试。基本上我希望这个代码示例根据输入的内容吐出文本值。在这种情况下，如果输入“yes”，它会吐出“Success”，如果输入任何其他内容，它会吐出“No Luck”。从那里我希望它实际显示一个 div。但那是以后的事，我想除非有人知道如何从这里到达那里。使用此代码，无论您是否输入“Yes”，都只会输出“No Luck”。
<head>
<script>
function show()
{
var input = document.getElementById("someInput");
if(input == "yes"){
document.getElementById("someDiv").innerHTML = "Success";
}
else{
document.getElementById("someDiv").innerHTML = "No Luck";}
}
</script>
</head>
<html>
<input id="someInput" type="text">
<input type="button" value="Submit" onClick="show()">
<br><br>
<div id="someDiv">
</div>
<br>
</html>
回答by km6zla
You need to use the .valueproperty if it's an input element
.value如果它是输入元素，则需要使用该属性
if(input.value == "yes"){
or the .textproperty if you just want the text inside another element
或.text属性，如果您只想要另一个元素中的文本
or the .innerHTMLproperty if you just want the html inside another element
或.innerHTML属性，如果您只想要另一个元素中的 html
回答by Spoo
Head always belongs inside html tags fyi. Javascript either belongs in the head or the tag should be the last thing rendered as it is functionally faster to load.
Head 总是属于 html 标签内部。Javascript 要么属于头部，要么标签应该是最后呈现的东西，因为它在功能上加载速度更快。
But a solution that appends the success or value to the screen inside the someDiv element should be similar to the following.
但是将成功或值附加到 someDiv 元素内的屏幕的解决方案应该类似于以下内容。
<html>
<head>
<script type="text/javascript">
var inputtxt = document.getElementById('someInput');
var appendLocation = document.getElementById('someDiv');
function show() {
if(inputtxt.value === "yes") {
appendLocation.innerHTML = appendLocation.innerHTML + "<div>Success</div>";
}
else
{
appendLocation.innerHTML = appendLocation.innerHTML + "<div>No Luck!</div>";
}
}
</script>
</head>
<input id="someInput" type="text">
<input type="button" value="Submit" onClick="show()">
<br><br>
<div id="someDiv">
</div>
<br>
</html>
