使用JS从选择和文本输入中捕获值,然后将输出返回到HTML

Questifer

我的表格有点像计算器。在文本框中输入一个数字,然后使用下拉菜单,用户选择一个用作乘数的数字。我可以从文本框中正确捕获值,但是从选择输入中捕获值很棘手。

我希望在用户更改文本框中的数字或更改他们在选择字段中选择的选项时运行此功能。

小提琴

# HTML
<form>
    <input type="text" id="numberInput"></input>
    <select id="lengthInput">
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
</form>
<div id="result"></div>

# JS
$(function () {
    var amount = $('#numberInput').val();
    var length_value = ''
    $('#lengthInput').on("change", function () {
        var length = document.getElementById("lengthInput");
        var length_value = length.options[length.selectedIndex].value;
    }).change();
    var calculatedAmount = amount * length_value;
    document.getElementById('result').innerHTML = amount
});
j08691

您可以减少必须要做的事情:

$(function () {
    $(':input').on('change keyup',function () {
        $('#result').html($('#numberInput').val() * $('#lengthInput').val());
    })
});

jsFiddle示例

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

将HTML输入值传递给javascript函数,然后将JS结果输出到<p> HTML

来自分类Dev

如何使用javascript将选择中的值发送到html中的输入文本?

来自分类Dev

如何将值从JavaScript中的函数返回到HTML中的文本框

来自分类Dev

如何将值从JavaScript中的函数返回到HTML中的文本框

来自分类Dev

使用表中的值将文本输入转换为选择

来自分类Dev

将javascript输出消息返回到html主体中

来自分类Dev

使用JavaScript将值返回到文本框

来自分类Dev

从一个SQL表中搜索文本并与另一个SQL表中的文本匹配,然后将值返回到新列

来自分类Dev

将输出重定向到文件,然后返回到C ++中的控制台

来自分类Dev

使用javascript / lodash将特定键的相同值分组并计数,然后将结果返回到数组

来自分类Dev

Python:将值读入空数组,然后返回到文件

来自分类Dev

将值返回到列表中

来自分类Dev

如何将文本输入返回到React组件

来自分类Dev

如何获取html表中选择行的值并使用javasricpt在输入文本中显示它们?

来自分类Dev

将SQL查询的值返回到C#中的文本框

来自分类Dev

在angular.js的选择下拉列表中绑定值和文本

来自分类Dev

如何将文本捕获到输入文本框值jquery中

来自分类Dev

将输入返回到段落

来自分类Dev

输入名称、值和文本

来自分类Dev

将 null 返回到 dbtype.date 的输出参数中

来自分类Dev

复制范围,然后将值粘贴到工作表的不同部分,然后返回到原始范围

来自分类Dev

JS / JQuery:从文本输入中选择OR的值

来自分类Dev

从 Javascript 表中设置选择选项的值和文本

来自分类Dev

使用值是返回表单JS的输入字段中的值

来自分类Dev

使用WebView将按钮文本从Javascript返回到Java

来自分类Dev

将值从服务器返回到 html 以进行操作

来自分类Dev

使用Angular.js中的JSON绑定html时,选择选项值返回null

来自分类Dev

使用post方法表达js图像上传和文本输入

来自分类Dev

合并JS中的两个对象,然后根据单个输入选择多个值

Related 相关文章

  1. 1

    将HTML输入值传递给javascript函数,然后将JS结果输出到<p> HTML

  2. 2

    如何使用javascript将选择中的值发送到html中的输入文本?

  3. 3

    如何将值从JavaScript中的函数返回到HTML中的文本框

  4. 4

    如何将值从JavaScript中的函数返回到HTML中的文本框

  5. 5

    使用表中的值将文本输入转换为选择

  6. 6

    将javascript输出消息返回到html主体中

  7. 7

    使用JavaScript将值返回到文本框

  8. 8

    从一个SQL表中搜索文本并与另一个SQL表中的文本匹配,然后将值返回到新列

  9. 9

    将输出重定向到文件,然后返回到C ++中的控制台

  10. 10

    使用javascript / lodash将特定键的相同值分组并计数,然后将结果返回到数组

  11. 11

    Python:将值读入空数组,然后返回到文件

  12. 12

    将值返回到列表中

  13. 13

    如何将文本输入返回到React组件

  14. 14

    如何获取html表中选择行的值并使用javasricpt在输入文本中显示它们?

  15. 15

    将SQL查询的值返回到C#中的文本框

  16. 16

    在angular.js的选择下拉列表中绑定值和文本

  17. 17

    如何将文本捕获到输入文本框值jquery中

  18. 18

    将输入返回到段落

  19. 19

    输入名称、值和文本

  20. 20

    将 null 返回到 dbtype.date 的输出参数中

  21. 21

    复制范围,然后将值粘贴到工作表的不同部分,然后返回到原始范围

  22. 22

    JS / JQuery:从文本输入中选择OR的值

  23. 23

    从 Javascript 表中设置选择选项的值和文本

  24. 24

    使用值是返回表单JS的输入字段中的值

  25. 25

    使用WebView将按钮文本从Javascript返回到Java

  26. 26

    将值从服务器返回到 html 以进行操作

  27. 27

    使用Angular.js中的JSON绑定html时,选择选项值返回null

  28. 28

    使用post方法表达js图像上传和文本输入

  29. 29

    合并JS中的两个对象,然后根据单个输入选择多个值

热门标签

归档