两个文本框事件Javascript

Two Text Box Events Javascript

本文关键字：事件 Javascript 文本 两个      更新时间：2023-09-26

我在编写两个文本框事件时遇到了一些问题，希望得到一些帮助。。。

我有以下内容：

<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'）应该根据用户从下拉文本列表中选择的内容来更改数值。在左侧框中输入值后，右侧框将正确更新，同时更改下拉列表中的项目。然而，我希望它能双向运行。例如：

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)

简单地说，我希望两个文本框都更新到与对面框上所选水果/等价物相关的正确值。

感谢

您在代码中犯了几个语法错误，并试图访问一些超出范围的变量。您在变量名称中也出现了拼写错误。

是你代码的工作小提琴

html代码

<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>

javascript

var lftchoice = document.getElementById('begin'),
      rgtchoice = document.getElementById('done'),
      newLeft   = document.getElementById("toLeftBox"),
      newRight  = document.getElementById("toRightBox");
    var tempL;
   var tempR;
  newValRight = function(){
      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(){
     tempL = document.getElementById("toLeftBox").value;
     if(tempL == tempR){
       lftchoice.value = rgtchoice.value*1;
     }else if(tempL == "b"){
       lftchoice.value = rgtchoice.value * 2;
     }else if(tempL == "c"){
       lftchoice.value = rgtchoice.value * 3;
     }
   }
     lftchoice.onkeyup = newValRight;
     rgtchoice.onkeyup = newValLeft;
     newLeft.onchange = newValLeft;
     newRight.onchange = newValRight;

我想这正是您所需要的。

        <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>
相关文章：