Question

我在写一个双文本框事件时有点麻烦，想要一些帮助......

我有以下内容：

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

我有两个文本框。左侧文本框（＆＃39;开始＆＃39;）将接受所选项目的权重＆＃39;。但是右边的框（＆＃39;已完成＆＃39;）应根据用户从下拉文本列表中选择的内容更改数值。在左框中输入值时，右侧框会正确更新，同时更改下拉列表中的项目。但是，我希望它能同时发挥作用。例如：

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)

简单地说，我希望两个文本框都相对于相对框中所选择的水果/等效物更新为正确的值。

谢谢

Answer 1

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

您的代码here

的工作小提琴

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;

Answer 2

我想这就是你需要的。

        <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

2 个答案: