javascript - 如何使用下拉列表中的值在 javascript 中创建函数?

标签 javascript html

尝试使用 html 中的下拉值创建一个函数,如下所示

<html>
    <head>
        <title>Taxi Fare</title>
        <center><h1>Taxi Fare</h1>
        <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">    
        <script>
            function myAddition(){
                var NorthAvenue = 0;
                var QuezonAvenue = 4;
                var GMAKamuning = 5;
                var $sum = (40) + (place2 - place1) * (14);
                    window.alert("The sum is: " + $sum);
            }
        </script>
    </head>
    <body class="bg-warning">
        <center>
        <form method="post">
    <select id="place1" name="place1">
        <option value="NorthAvenue">North Avenue</option>
        <option value="QuezonAvenue">Quezon Ave</option>
        <option value="GMAKamuning">GMA Kamuning</option>
    </select>
</form>
<form method="post">
    <select id="place2" name="place2">
        <option value="NorthAvenue">North Avenue</option>
        <option value="QuezonAvenue">Quezon Ave</option>
        <option value="GMAKamuning">GMA Kamuning</option>
    </select>
            <button type="button" onclick="myAddition(place2,place1)">Compute Fare</button>
    </body>
</html> 

但它总是返回“the sum is NaN”只是对这里的问题感到困惑

最佳答案

在你的脚本函数中放置两个像这样的参数 function myAddition(place2,place1)并将选择标签的值从文本更改为数字,如下所示 <select id="place1" name="place1"> <option value="0">North Avenue</option> <option value="4">Quezon Ave</option> <option value="5">GMA Kamuning</option> </select> <select id="place2" name="place2"> <option value="0">North Avenue</option> <option value="4">Quezon Ave</option> <option value="5">GMA Kamuning</option> </select> <button type="button" onclick="myAddition(document.getElementById('place2').value,document.getElementById('place1').value)">Compute Fare</button> 请以这种方式尝试您的代码

关于javascript - 如何使用下拉列表中的值在 javascript 中创建函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60033516/

相关文章:

javascript - 我正在 CodeIgniter 中使用 kyeup 函数,但 kyeup 函数无法正常工作

javascript - 如何动态命名游戏动画中的对象?

javascript - 将参数传递给函数

java - Liferay 搜索迭代器仅在页面选择器中显示前 11 页

html - 如何将样式应用于所有文本输入且不具有 "size"属性?

javascript - jQuery - 实现独特的连续排名

javascript - 请求自动播放音频文件的权限

html - 无法将 ul li 列表与 div 的顶部对齐

html - 具有最高和最低价格的价格栏

html - HTML+CSS 树形表