【问题标题】:How to add a button to show the result in javascript如何添加一个按钮以在 javascript 中显示结果
【发布时间】:2021-04-25 16:51:25
【问题描述】:

用户将在输入字段中输入一个数字,然后选择其中一个单选按钮 如果他按下任何键,结果将动态显示,但我想添加一个按钮,以便用户可以单击它来查看结果

$(document).ready(function check() {
$('input').keyup(function check() {

var arg1 = parseFloat($('#in1').val());
var arg2 = parseFloat($('#in2').val());

month=f.m.value
if(month=="10")
$('#tdin1').html(parseInt(((arg1 + (((arg1 * 12) )/ 12))/ month)));
else if (month=="20")
$('#tdin1').html(parseInt(((arg1 + (((arg1 * 18) )/ 12))/ month)));
    
document.getElementById("tdin1").innerHTML = val; 

slider.oninput = function check() {
output.innerHTML = this.value;} });});

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<input type="number" id="in1"/>
    
<form name="f">  
<input type="radio" name="m" value="10" onchange="check()">    
<input type="radio" name="m" value="20" onchange="check()">  
</form>
        
<span id="tdin1"></span>

【问题讨论】:

  • 您拥有所需的大部分代码。您现在需要做的不是在 keyup 事件中使用结果更新 HTML,而是将值保存在全局变量或索引数据库中。对输入和所有无线电选择器执行此操作。最后,添加一个按钮,该按钮具有一个事件处理程序,用于检查所有输入的值并将它们显示在页面上。希望对您有所帮助。

标签: javascript html jquery dom


【解决方案1】:
<form name="f">  
<input type="radio" name="m" value="10" onchange="check()">    
<input type="radio" name="m" value="20" onchange="check()">
<input type="button" onclick()="yourfunction()"
</form>

只需添加此输入类型 = 按钮并在单击时应用该功能即可显示结果。您需要创建一个函数并在该函数中执行操作

【讨论】:

    【解决方案2】:

    将按钮添加到html并添加点击功能

    <form name="f">  
       <input type="radio" name="m" value="10" onchange="check()">    
       <input type="radio" name="m" value="20" onchange="check()">
       <input type="button" onclick="Result()">Result</input>
     </form>
    

    添加 Result() 函数并渲染到 span 标签

     <script>
    
        function Result() {
        document.getElementById("tdin1").innerHTML = val;    
        }
    
     </script>
    

    【讨论】:

    • 你能把你的完整代码的链接和你把这段代码放在带有脚本标签的html文件或js的单独文件中吗?
    猜你喜欢
    • 2017-01-12
    • 2013-05-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-01-28
    相关资源
    最近更新 更多