javascript 基于输入值的Javascript输出文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13851276/
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 output text based on input value
提问by aj12
I'm trying to make a form where you input a number to a textbox and based upon that a text response is put in a textbox. This is an example of what I have been trying to make work:
我正在尝试制作一个表单，您可以在其中向文本框输入一个数字，并基于将文本响应放入文本框中。这是我一直在努力工作的一个例子：
<html>
<head>
<script type="text/javascript">
function calculate()
{
var ph = document.test.ph.value;
if (ph > 7.45) {
var str = "Alkalosis";
}
else if (ph < 7.35) {
var str = "Acidosis";
}
else {
var str = "Normal";
}
document.test.acidalk.value = str;
}
</script>
</head>
<body>
<form name="test">
pH<input type="textbox" name="ph"><br>
<input type="submit" value="Calculate"><br>
<input type="textbox" id="acidalk" >
</form>
</body>
</html>
The idea of what I'm trying to achieve is if a number higher than 7.45 is put in the first text box, the button clicked, then the word "Alkalosis" is put in the second text box, but if the number is less than 7.35, the word is "Acidosis" instead.
我想要实现的想法是，如果将大于 7.45 的数字放入第一个文本框中，单击按钮，然后将“碱中毒”一词放入第二个文本框中，但如果数字小于7.35，这个词用“酸中毒”代替。
Any help would be greatly appreciated
任何帮助将不胜感激
采纳答案by Apropos
Well, you're most of the way there. Instead of having the button be a submit button, try
嗯，你大部分时间都在那里。与其让按钮成为提交按钮，不如尝试
<input type="button" onclick="calculate();" value="Calculate" />
回答by Charles Ovando
Base of your code This will be a way to do it:
代码的基础 这将是一种方法：
<html>
<head>
<script type="text/javascript">
function calculate(){
var ph = document.getElementById('ph').value;
if(ph > 7.45){
var str="Alkalosis";
}else if(ph < 7.35){
var str="Acidosis";
} else{
var str="Normal";
}
document.getElementById('acidalk').value =str;
}
</script>
</head>
<body>
pH<input type="textbox" name="ph"><br>
<button onclick="calculate()">Calculate</button>
<input type="textbox" id="acidalk" >
</body>
</html>
hope helps!
希望有帮助！
回答by gilly3
You have the form, you have the function, you just need a way to tie them together. Do it by assigning calculate()as an event handler for the form's submitevent. Make sure to return falseelse the form will be submitted and the result of calculate()will not be seen.
你有形式，你有功能，你只需要一种将它们联系在一起的方法。通过将其分配calculate()为表单submit事件的事件处理程序来实现。确保return false否则表单将被提交并且calculate()不会看到结果。
<form name="test" onsubmit="calculate(); return false">
Binding to the form's submitevent rather than button's clickevent has the added benefit of calling the function when enteris pressed. It also ensures the form is not ever accidentally submitted.
绑定到表单的submit事件而不是按钮的click事件具有在enter按下时调用函数的额外好处。它还确保表单不会被意外提交。
回答by kmoney12
With jQuery:
使用 jQuery：
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>pH
<input type="textbox" name="ph" id="ph">
<br>
<button id="calculate">Calculate Acid Level</button>
<br />
<input type="textbox" id="acidalk" value="" />
</body>
<script type="text/javascript">
$("#calculate").click(function () {
var ph = $("#ph").val();
if (ph > 7.45) str = "Alkalosis";
else if (ph < 7.35) var str = "Acidosis";
else var str = "Normal";
$("#acidalk").val(str);
});
</script>
</html>
