Javascript 选中“单选框”时向文本框添加文本_Javascript_Html

Javascript 选中“单选框”时向文本框添加文本

javascript html

Javascript 选中“单选框”时向文本框添加文本,javascript,html,Javascript,Html,为了更好地理解javascript，我正在尝试为自己做一个小项目。不想成为一名专家，只是要有更好的理解我正在制作一个稀释计算器，我想知道根据是否选择了收音机，将单位oz或mL插入输入框和输出div的最佳方式是什么。我想这会自动发生在页面加载以及对收音机的变化 <div class="input-group input-margin-top"> <input type="text" id="containersize&quo

为了更好地理解javascript，我正在尝试为自己做一个小项目。不想成为一名专家，只是要有更好的理解

我正在制作一个稀释计算器，我想知道根据是否选择了收音机，将单位oz或mL插入输入框和输出div的最佳方式是什么。我想这会自动发生在页面加载以及对收音机的变化

<div class="input-group input-margin-top">
  <input type="text" id="containersize" class="form-control" value="0" onclick="this.select();">
  <span class="input-group-addon">
    <input type="radio" name="inlineRadioOptions" id="ounces" checked> oz
  </span>
  <span class="input-group-addon">
    <input type="radio" name="inlineRadioOptions" id="millilitres"> mL
  </span>     
</div>

下面是我如何设置单选按钮的HTML

我还想知道，当您在输入任何值之前选择mL收音机时，最好的方法是什么，以避免出现NaN。我在考虑使用if语句来检查第一个框的值是否为零，而不是不运行convert函数。我对这里的想法持开放态度

这里是我目前拥有的，请记住，大约48小时前我从未使用过Javascript

我是所有学习如何做到这一点，所以如果你有任何关于这个主题的好链接让我知道

非常感谢你的帮助。非常感谢。

在您的函数计算中，如果您做出如下条件： ifa>0{ c=a/b+1； d=c*b； } 南部将消失

对于页面加载，您可以使用来执行所需的功能。

这不是答案，更像是意识形态宣传-

但是，既然你征求意见，我就把我的观点强加给你

这里的许多人会建议在学习javascript之前不要处理jQuery，但我不同意。我从jQuery开始，在几个小时内就很有效率，现在我正在填补我在设计了许多网站之后错过的关于javascript的内容

下面是一个示例，说明为什么您可能更喜欢学习jQuery而不是普通javascript：

jQuery方法：

使用jQuery方式键入的内容要少得多，尤其是在整个项目中。此外，jQuery还为您处理所有跨浏览器问题。使用javascript，您必须自己为每个浏览器编写代码。对于大多数开发人员来说，jQuery更快更简单

注意：在使用jQuery命令之前，必须在页面上包括jQuery库-通常在HEAD标记之间，如下所示：

<head>
    <!-- other stuff in head -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

var inputs = document.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++) {
        inputs[i].addEventListener("keyup", function (event) {
        calculate(event);
    });
    inputs[i].addEventListener("change", function (event) {
        calculate(event);
    });
}

如果您使用CDN加载jQuery，如上面的示例所示，它可能已经从其他网站预加载

如果您想要一些关于jQuery的快速课程，请在此处找到免费的10分钟视频教程：

或

请在此处查看它的实际操作：

我在代码中添加了注释，这样您就可以看到每一步都发生了什么。如果你有什么困惑或不确定的地方，尽管问，我很乐意帮忙

注意：我强烈建议在使用jQuery这样的库之前至少学习JavaScript的基础知识

传入事件侦听器的原因是，我们可以在该函数中确定单击哪个元素以在oz和ml之间进行更改

if (event.target.value === "oz") {
    document.getElementById("containersize").value = (containerSize / (29.5735)).toFixed(1) + unit;
    document.getElementById("concentrateresults").innerHTML = (concentrateResult / (29.5735)).toFixed(1) + unit;
    document.getElementById("waterresults").innerHTML = (waterResult / (29.5735)).toFixed(1) + unit;
} else if (event.target.value === "ml") {
    document.getElementById("containersize").value = (containerSize * (29.5735)).toFixed(1) + unit;
    document.getElementById("concentrateresults").innerHTML = (concentrateResult * (29.5735)).toFixed(1) + unit;
    document.getElementById("waterresults").innerHTML = (waterResult * (29.5735)).toFixed(1) + unit;
} else {
    document.getElementById("containersize").value = containerSize.toFixed(1) + unit;
    document.getElementById("concentrateresults").innerHTML = concentrateResult.toFixed(1) + unit;
    document.getElementById("waterresults").innerHTML = waterResult.toFixed(1) + unit;
}

此函数还可以消除NaN错误，并根据请求添加oz或ml

根据评论编辑

您可以向同一元素添加多个事件侦听器，即使它调用相同的函数，如下所示：

<head>
    <!-- other stuff in head -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

var inputs = document.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++) {
        inputs[i].addEventListener("keyup", function (event) {
        calculate(event);
    });
    inputs[i].addEventListener("change", function (event) {
        calculate(event);
    });
}

在这里，我添加了keyup事件，因此当文本框中的数字更改时，它将重新计算。我保留了更改事件处理程序，以便它在单选按钮上按预期工作

我也在想，当你离开的时候，最好的办法是什么在输入任何值之前，请选择mL收音机

你可以简单地使用几个技巧来避免NaN，其中一个是使用| |：

正在跳过分析方法：

+("") || 0; //             <-- 0
+("3") || 0; //            <-- 3
+(".003") || 0; //         <-- 0.003

这只回答了问题的一部分，非常感谢你，看看你的想法，我真的知道我是多么费解。我的变量命名很糟糕，我必须改进它。这些评论实际上使这一点非常简单。我的下一个问题是，对于更改事件侦听器，是否有一种好方法可以避免必须点击enter键或单击空格才能启动它？我意识到把它设置成键控键会损坏收音机。这会不会是一个破坏eventlisteners的案例？一个用于文本输入键控，另一个用于收音机？一点问题都没有：-。就事件而言，您可以将相同的功能分配给keyup事件和change事件，以覆盖所有输入。稍后，我会将此添加到我的示例中，向您展示它是如何完成的。另外，如果我的答案对你有效，不要忘记投票并接受我的答案。谢谢@Shane-我已经编辑了我的答案，以包含额外的事件处理程序。如果您还有什么需要帮助的，请告诉我：-。别忘了投票，如果这个答案对你有用的话，请接受它。谢谢非常感谢，霍华德。我很抱歉，但我似乎无法投票支持这个答案，但我确实接受了。非常感谢你的帮助！在网上搜索我的问题的解决方案时，我看到了很多jQuery，看起来它可以解决我的很多问题。我将查看这些链接，看看我能做些什么

我可以学习。非常感谢。如果这是您问题的最佳解决方案，请记住接受它。单击复选标记作为首选答案。这样做也可以解决这个问题，这样其他人就不会花时间在这个问题上。谢谢，祝你的项目好运。

parseFloat(""); //         <-- NaN
parseFloat("") || 0; //    <-- 0
parseFloat("foo") || 0; // <-- 0

+("") || 0; //             <-- 0
+("3") || 0; //            <-- 3
+(".003") || 0; //         <-- 0.003