两个文本框事件的Javascript [英] Two Text Box Events Javascript
问题描述
我在编写一个双文本框事件时遇到了一些麻烦，并希望得到一些帮助......
I'm having a little bit of trouble writing a two-textbox-event and would like some help...
我有以下内容：
<body>
<form action="#">
<input type="text" id="begin" />
<select id "toLeftBox">
<option value = "a">Apple</option>
<option value = "b">Blueberry</option>
<option value = "c">Cherry</option>
</select>
=
<input type="text" id="done" />
<select id= "toRightBox">
<option value="a">Apple</option>
<option value="b">Blueberry</option>
<option value="c">Cherry</option>
</select>
<p id = "leftWeight"></p>
<p id = "rightWeight"></p>
</form>
<script>
var lftchoice = document.getElementById('begin'),
rgtchoice = document.getElementById('done');
newLeft = document.getElementById("toLeftBox");
newRight = document.getElementById("toRightBox");
newValRight = function(){
var tempR = document.getElementById("toRightBox").value;
if(tempR == "a"){
rgtchoice.value = lftchoice.value * 1;
}else if(tempR == "b"){
rgtchoice.value = lftchoice.value * 2;
}else if(tempR == "c"){
rgtchoice.value = lftchoice.value * 3;
}
}
newValLeft = function(){
var tempL = document.getElementById("toLeftBox").value;
if(tempL == tempR){
lftchoice.value = rgtchoice.value*1;
}else if(tempL == "b"){
lftchoice.value = rghtchoice.value * 2;
}else if(tempL == "c"){
lftchoice.value = rgtchoice.value * 3;
}
}
lftchoice.onkeyup = newValRight;
rgtchoice.onkeyup = newValLeft;
newLeft.onchange = newValLeft;
newRight.onchange = newValRight;
</script>
</body>
我有两个文本框。左边的文本框（'开始'）将接受'选择的项目'的权重。但是正确的方框（'done'）应该根据用户从下拉文本列表中选择的内容更改数值。
当值在左侧框中输入时，右侧框更新正确，同时更改下拉列表中的项目。
但是，我希望它能够双向工作。
例如：
I have two text boxes. The left text box ('begin') will accept the weight of 'chosen item'. But the right box ('done') should change the number value depending on what the user chooses form the drop-down text list. When the value is entered in the left box, the right box updates correctly, while changing items in drop down list. However, I would like it to work both ways. For example:
Left 23 [Apple] = Right 23 [Apple]
Left 23 [Apple] = Right 46 [Blueberry] (if I change to blueberry on right list)
Left 46 [Blueberry] = Right 46 [Blueberry] (if I keep the right, and just change lft list)
简而言之，我希望两个文本框都能更新为正确的值box。
Simply put, I would like both text boxes to update to the correct value with respect to the chosen fruit/ equivalence on the opposite box.
谢谢
thank you
推荐答案
我想这就是你需要。
I guess this is what you need.
<body>
<form action="#">
<input type="text" id="begin" onkeyup="k(1);" />
<select id="Fruitbox1" onclick="k(1);">
<option value = "3">Apple</option>
<option value = "1.5">Blueberry</option>
<option value = "1">Cherry</option>
</select>
=
<input type="text" id="done" onkeyup="k(0);"/>
<select id="Fruitbox2" onclick="k(0);">
<option value="3">Apple</option>
<option value="1.5">Blueberry</option>
<option value="1">Cherry</option>
</select>
<p id = "leftWeight"></p>
<p id = "rightWeight"></p>
</form>
<script>
function k(x){
var weightOfFruit1=document.getElementById("Fruitbox1")
var weightOfFruit2=document.getElementById("Fruitbox2")
var NumberofFruit1=document.getElementById("begin")
var NumberofFruit2=document.getElementById("done")
if(x==1)
{
TotalNumberofFruit2=(NumberofFruit1.value * weightOfFruit1.value)/weightOfFruit2.value
NumberofFruit2.value=parseInt(TotalNumberofFruit2)
}else
{
TotalNumberofFruit1=(NumberofFruit2.value * weightOfFruit2.value)/weightOfFruit1.value
NumberofFruit1.value=parseInt(TotalNumberofFruit1)
}
}
</script>
</body>
这篇关于两个文本框事件的Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
