简体   繁体   English

表单输入未保存在JavaScript函数中。 为什么?

[英]form input does not get saved in JavaScript function. Why?

I can not find why this does not work. 我找不到为什么这行不通。 "document.getElementById("number").value" won't "return" in function.. My HTML code: “ document.getElementById(” number“)。value”不会在函数中“返回”。我的HTML代码:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="Currency_Converter.css">
    <link rel="stylesheet"    href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/> 
 </head> 
 <body>

 <div class="container">
 <h1>Currency Converter</h1>
 <form id="amount">Dollar amount &ensp;$<input id="number" type="number" name="number" onkeyup="getDollarAmount();" onchange="getDollarAmount();" placeholder="type dollar amount here" ></form>      
</div>     
</body>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type='text/javascript' src="Currency_Converter.js"></script>
</html>

My JavaScript: 我的JavaScript:

function getDollarAmount() {
  var dollarAmount = document.getElementById("number").value;
    return (dollarAmount);
} 
console.log(getDollarAmount());

My "function getDollarAmount()" does not return the number put into the form. 我的“函数getDollarAmount()”不返回放入表单的数字。 When I "console.log (dollarAmount)" I get my input. 当我“ console.log(dollarAmount)”时,我得到了输入。 When I take out the "document.getElementById("number").value" and replace it with a number, (ex.: 5) the "getDollarAmount" function returns the number (5). 当我取出“ document.getElementById(” number“)。value”并替换为数字时,(例如:5),“ getDollarAmount”函数将返回数字(5)。

Obviously, the issue is with "document.getElementById("number").value" since the function works in every other way. 显然,问题在于“ document.getElementById(“ number”)。value“,因为该函数以其他方式工作。 What do I need to do to get "document.getElementById("number").value" to be returned to "getDollarAmount()"? 我需要怎么做才能将“ document.getElementById(” number“)。value”返回给“ getDollarAmount()”?

尝试

var dollarAmount = $("#number").val();

The mistake here is that you are returning the value instead of assigning the dollarAmount variable to the input value attribute. 这里的错误是您要返回值,而不是将dollarAmount变量分配给输入值属性。

Apart from that the idea to return the converted currency value in the same place you type the amount you want to convert to is not a good practice and will be confusing. 除此之外,在您键入要转换的金额的相同位置返回转换后的货币值的想法不是一个好习惯,而且会造成混淆。

You should have a place to input and a place to show the converted value. 您应该有一个输入位置和一个显示转换后的值的位置。 It's a better user experience and better for you. 这是更好的用户体验,对您也更好。

You don't need jQuery. 您不需要jQuery。 Here's an example: 这是一个例子:

 var el = document.getElementById("number"); el.addEventListener("keyup", function() { //You need to assign the value to a variable var dollarAmount = getDollarAmount(); }); function getDollarAmount() { return el.value; } 
 <input id="number" type="number" name="number" placeholder="type dollar amount here" value="0" > 

Hope it helps. 希望能帮助到你。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 HTML表单中的数据未保存在我的javascript函数中 - Data from HTML form does not get saved in my javascript function 将数字输入传递给函数。 Javascript - Passing an number input into a function. Javascript 当我将JavaScript块添加到函数中时,该块不起作用。 有人可以帮忙解释原因吗? - A block of JavaScript does not work when I add it to a function. can anybody help explain why? 当我将随机数生成器/猜测器放入函数时,我的JavaScript代码崩溃了。 为什么会崩溃? - My javascript code is crashing when I put a random number generator/guesser into a function. Why does it crash? Javascript onclick函数。 输入块。 预期封锁 - Javascript onclick function. Input block. Expected block HTML表单,getElementById无法在javascript函数内运行。 登录页面 - HTML Form, getElementById not working inside javascript function. Login Page 为什么带有输入文本框和在Enter键上调用javascript函数的按钮的表单? - Why does a form with an input text-box and a button which calls a javascript function on enter key press? 添加函数的Javascript toString技巧。它是如何工作的? - Javascript toString trick in adding function. How does it work? 传播功能意味着什么。 正常函数是否可以在javascript中迭代 - What does it mean to spread a function. Are normal functions iterable in javascript 闭包编译器在我的Javascript函数中添加了“-”。 这是什么意思? - Closure compiler added '--' to my Javascript function. What does it mean?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM