JS下拉对变化没有反应

时间:2017-01-28 14:03:06

标签: javascript dropdown

我正在尝试通过计算值来计算,但是当您更改下拉选项时,结果不会进行更改,任何解决方案,谢谢

</head>
<body>

  <script>
function add() {
  var x = parseInt(document.getElementById("a").value);
  var y = parseInt(document.getElementById("b").value)
  document.getElementById("c").value = ((x * y)*1.1).toFixed(2);
 
}
</script>
  
Enter 1st Number :
<input type="text" id="a" onkeyup="add()">
<br>
<br>Enter 2nd Number :
<select type="text" id="b" onchange="add()">
  <option value="1">6 mjeseci</option>
  <option value="2">12 mjeseci</option>
  <option value="3">18 mjeseci</option>
  <option value="4">24 mjeseci</option>
</select>
<br>
<br>Result :
<input type="text" id="c" >
</body>
</html>

4 个答案:

答案 0 :(得分:2)

只需更改您的功能名称,然后使用onchange。 据W3Schools说:

  

onchange当用户更改元素的选定选项时执行JavaScript

这是正确的代码:

  <script>
function addnum() {
  var x = parseInt(document.getElementById("a").value);
  var y = parseInt(document.getElementById("b").value)
  document.getElementById("c").value = ((x * y)*1.1).toFixed(2);
 
}
</script>
  
Enter 1st Number :
<input type="text" id="a" onkeyup="addnum()">
<br>
<br>Enter 2nd Number :
<select type="text" id="b" onchange="addnum()">
  <option value="1">6 mjeseci</option>
  <option value="2">12 mjeseci</option>
  <option value="3">18 mjeseci</option>
  <option value="4">24 mjeseci</option>
</select>
<br>
<br>Result :
<input type="text" id="c" >

答案 1 :(得分:0)

您可以在下拉列表中添加事件侦听器,以便触发add()函数。

在加载所有DOM元素之后,确保您的脚本在页面底部运行。

<body>
    <!-- Your existing HTML -->
    Enter 1st Number :
    <input type="text" id="a" onkeyup="add()">
    <br>
    <br>Enter 2nd Number :
    <select type="text" id="b" >
        <option value="1">6 mjeseci</option>
        <option value="2">12 mjeseci</option>
        <option value="3">18 mjeseci</option>
        <option value="4">24 mjeseci</option>
    </select>
    <br>
    <br>Result :
    <input type="text" id="c" >

    <!-- Put your script after the HTML -->
    <script>
        function add() {
          var x = parseInt(document.getElementById("a").value);
          var y = parseInt(document.getElementById("b").value)
          document.getElementById("c").value = ((x * y)*1.1).toFixed(2);
        }

        // Event listener on dropdown will call the function add()
        document.getElementById("b").addEventListener('change', add, false);
    </script>
</body>

答案 2 :(得分:0)

真正不使用代码的原因是函数名add,因为add是HTMLSelectElement中已经定义的函数 https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/add

add()函数用于向select元素添加选项。

function addition() {
  var x = parseInt(document.getElementById("a").value);
  var y = parseInt(document.getElementById("b").value)
  document.getElementById("c").value = ((x * y) * 1.1).toFixed(2);

}

var opt1 = document.createElement("option");
opt1.value = "1";
opt1.text = "Option: Value 1";
<html>

<head>
</head>

<body>


  Enter 1st Number :
  <input type="text" id="a" onkeyup="addition()">
  <br>
  <br>Enter 2nd Number :
  <select type="text" id="b" onchange="addition()">
    <option value="1">6 mjeseci</option>
    <option value="2">12 mjeseci</option>
    <option value="3">18 mjeseci</option>
    <option value="4">24 mjeseci</option>
  </select>
  <br>
  <br>Result :
  <input type="text" id="c">
</body>

<br>
<br>
<br>This is the demo for add() function:
<select type="text" id="Addfun" onchange="add(opt1)">
  <option value="1">6 mjeseci</option>
  <option value="2">12 mjeseci</option>
  <option value="3">18 mjeseci</option>
  <option value="4">24 mjeseci</option>
</select>
<br>After changing the option see the options in dropdown.

</html>

答案 3 :(得分:0)

不幸的是,功能名称&#39;添加&#39;与一些内置逻辑冲突。 所以,只需更改功能名称

#include <algorithm>
#include <type_traits>

template <class T, T val>
using ic = std::integral_constant<T, val>;

template <typename T, T lower, T upper>
T clamp(ic<T, lower>, ic<T, upper>, const T& n)
{
    static_assert(upper >= lower, "invalid bounds");
    return std::max(lower, std::min(n, upper));
}

int main() {
    clamp(ic<std::size_t, 5>{},  ic<std::size_t, 10>{}, std::size_t{8});
    // clamp(ic<std::size_t, 10>{},  ic<std::size_t, 5>{}, std::size_t{8}); // static assertion failed: invalid bounds
}