Question

我是一个noobie，我需要一些帮助来改变文本框中的事件。

这是我正在使用的代码：

    <body>
      <form action="#">
        <input type="text" id="begin" /> Apple
        =
        <input type="text" id="done" /> 


        <select id="newValue" onchange = "function()">
          <option value="a">Apple</option>
          <option value="b">Blueberry</option>
          <option value="c">Cheese</option>
        </select>
        <p id = "weight"></p>
      </form>

      <script>
      var apple = document.getElementById('begin'),
          choice = document.getElementById('done');

      apple.onkeyup = function(){
         var temp = document.getElementById("newValue").value;
          choice.value = this.value * 1; //if apple
         choice.value = this.value * 2; //if blueberry
         choice.value = this.value * 3; //if cheese
      }
</script>
</body>

我有两个文本框。左侧文本框（＆＃39;开始＆＃39;）将接受苹果的重量。但是右边的框（＆＃39;已完成＆＃39;）应根据用户从下拉文本列表中选择的内容更改数值。我的

apple.onkeyup = function(){

做得不对。如果我给出＆＃39; 2＆＃39;的值在左侧文本框中，无论我在下拉列表中选择什么，它都将返回2 * 3 = 6，这意味着它会跳过函数中的所有内容并仅评估最后一个语句。

choice.value = this.value * 3; /*if cheese

我希望它如何工作：

Left Box : 2      Right Box : 2 (if apple was chosen)
Left Box : 2      Right Box : 4 (if blueberry was chosen)

我确定我需要一些＆＃39; if语句＆＃39;确定选择了哪个输出选择，类似于

    if(temp = Apple){
       choice.value = this.value * 1;
    }else if(temp = Blueberry){
       choice.value = this.value * 2;
    }
   }

当用户从列表中选择不同的项目时，右框中的值也应该更改。

虽然我不确定这是否是正确的方法/语法。

Answer 1

我认为这可能正是您所寻找的，here is a fiddle。

从onchange选项中移除newValue并将其设置在JavaScript中，就像使用onkeyup apple函数一样。在上面的代码中，您正在调用function()，这可能只会导致错误。 function()表示匿名函数，如果您想以这种方式调用函数，则需要使用语法function name()命名函数。但是，由于您已经从JavaScript设置了onkeyup，因此在这种情况下，您也可以从同一位置设置onchange。

然后将您的JavaScript更改为：

var apple = document.getElementById("begin"),
    choice = document.getElementById("done"),
    fruits = document.getElementById("newValue");

// This function properly sets the done field.
var setDone = function() {
    var newVal = document.getElementById("newValue").value;
    if (newVal == "a") {
        choice.value = apple.value * 1; //if apple
    } else if (newVal == "b") {
        choice.value = apple.value * 2; //if blueberry
    } else if (newVal == "c") {
        choice.value = apple.value * 3; //if cheese
    } else {
        alert("I couldn't find that value!");
    }
}

apple.onkeyup = setDone;
fruits.onchange = setDone;

我将您的匿名函数转换为命名变量，添加if语句以检查newValue的值并正确设置apple的值。

然后，我为onkeyup设置了onchange和apple个事件以及我为您的选择器fruits创建的新变量。

如果您对此工作有任何疑问，请随时在下面的评论中提问。

Answer 2

试试这个 - 我不确定我的苹果和蓝莓是否按正确顺序排列，但看起来效果还可以：

var apple = document.getElementById('begin'),
          choice = document.getElementById('done');

      apple.onkeyup = function(){
         var temp = document.getElementById("newValue").value;
          if (temp == 'a') {
          choice.value = this.value * 1;
          } 
          if (temp == 'b') {
         choice.value = this.value * 2;
          }
          if (temp == 'c') {
         choice.value = this.value * 3; 
          }
      }

FIDDLE

Answer 3

所以，我要在这里重新创建一些东西。据我所知，您想要选择一个食品并在其他文本字段中输出其重量。

/* begin and done are input and output. */
var input=document.getElementById("input");
var output=document.getElementById("output");

/* Handles a change in the input text field, like if the user types apple, blueberry, etc. */
/* You could make this a keyup listener as well, I suppose. */
input.addEventListener("change",function(event_){
    switch(this.value){
        case "apple":
            output.value="weight of apple";
        break;
        case "blueberry":
            output.value="weight of blueberry";
        break;
        /* Optional default value for when the user is messing around. */
        default:
            output.value="Please select an item from the drop down list."
        break;
    }
});

请务必使用条件来评估输出。我使用了switch语句，但是如果语句也很棒！我的意思是：

var x=10;
x=15;
x=7;
alert(x);// Returns 7

var y=Math.random()*100;
if (y<50){
    alert("y is less than 50");
} else {
    alert("y is greater than 50");
}

连续分配中的多个分配将被后续分配覆盖。

Answer 4

您的代码：

var temp = document.getElementById("newValue").value;
choice.value = this.value * 1; //if apple
choice.value = this.value * 2; //if blueberry
choice.value = this.value * 3; /*if cheese

等于：

var temp = document.getElementById("newValue").value; 
choice.value = this.value * 3;

你重复为choice.value赋值，所以最终的结果是：

choice.value = this.value * 3;

你应该改变代码：

<select id="newValue" onchange = "function()">
      <option value="1">Apple</option>
      <option value="2">Blueberry</option>
      <option value="3">Cheese</option>
    </select>

到：

<select id="newValue" onchange = "function()">
      <option value="a">Apple</option>
      <option value="b">Blueberry</option>
      <option value="c">Cheese</option>
    </select>

然后更改代码：

var temp = document.getElementById("newValue").value;
choice.value = this.value * 1; //if apple
choice.value = this.value * 2; //if blueberry
choice.value = this.value * 3; /*if cheese

代码：

var temp = document.getElementById("newValue").value;
choice.value = this.value * temp;

Answer 5

尝试这个，我测试了哪些可以工作。

<body>
  <form action="#">
    <input type="text" id="begin" /> Apple
    =
    <input type="text" id="done" /> 


    <select id="newValue" onchange = "f();">
      <option value="1">Apple</option>
      <option value="2">Blueberry</option>
      <option value="3">Cheese</option>
    </select>
    <p id = "weight"></p>
  </form>

  <script>
  var weightTag = document.getElementById('begin');
  var totalTag = document.getElementById('done');

  function f(){
    var priceTag = document.getElementById('newValue');
    if (weightTag.value != "") {
        var index = priceTag.selectedIndex;
        var priceValue = priceTag.options[index].value;
        totalTag.value = weightTag.value * priceValue;
    }

  }

  weightTag.onkeyup = f;

Answer 6

我认为这就是你所需要的。

  <html>
            <head>

            </head>
                <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>
    </html>

文本框事件Javascript

6 个答案: