Javascript 如何获取输入

Question

为了学校我需要做一个货币转换器。

    <!DOCTYPE html>
    <html lang="nl">
    <head>
    <meta charset="utf-8" />
    <title>Lab 10</title>
    <script src="lab10script.js"></script>
    </head>
    <body>
    <form name="form">
    <input type="text" name="bedrag" placeholder="Vul bedrag in" />
    <select id="list">
        <option>dollar/euro</option>
        <option>euro/dollar</option>
        <option>ruble/euro</option>
        <option>euro/ruble</option>
    </select>
    <<button type="button" onclick="myFunction()">Exchange</button>
</form>
</body>
</html>


function myFunction() {
var bedrag = document.getElementById("bedrag");
var x = document.getElementById("list").selectedIndex;
if (x == 0) { return (document.write("<br>test" + bedrag)); }
else { return (document.write("<br>test" + bedrag)); }
}

我的问题是，当我输入像 8 这样的数字时，它显示 "null"，我正在学习 JavaScript，所以有人可以帮助我吗？

Answer 1

<input type="text" name="bedrag" placeholder="Vul bedrag in" />

更改为这一行并重试：

<input type="text" id="bedrag" placeholder="Vul bedrag in" />

您可以使用 console.log(bedrag) 查看值是否被正确捕获。

Answer 2

在脚本中使用这一行，

var bedrag = document.getElementById("bedrag").value;

而不是，

var bedrag = document.getElementById("bedrag");

并在 input 中添加 id="bedrag"，因为您正在通过 id

访问元素

function myFunction() {
  var bedrag = document.getElementById("bedrag").value;
  var x = document.getElementById("list").selectedIndex;
  if (x == 0) { return (document.write("<br>test" + bedrag)); }
  else { return (document.write("<br>test" + bedrag)); }
}

<!DOCTYPE html>
 <html lang="nl">
   <head>
    <meta charset="utf-8" />
    <title>Lab 10</title>
    <script src="lab10script.js"></script>
   </head>
   <body>
    <form name="form">
    <input type="text" name="bedrag" id="bedrag" placeholder="Vul bedrag in" />
    <select id="list">
        <option>dollar/euro</option>
        <option>euro/dollar</option>
        <option>ruble/euro</option>
        <option>euro/ruble</option>
    </select>
    <button type="button" onclick="myFunction()">Exchange</button>
   </form>
  </body>
</html>

Answer 3

将输入中的名称属性替换为 id，如

<input type="text" name="bedrag" placeholder="Vul bedrag in" />

应该变成

<input type="text" id="bedrag" placeholder="Vul bedrag in" />

我不确定，但从问题和代码来看，您似乎只是想显示输入的值。在这种情况下，请尝试以下代码：

<!DOCTYPE html>
<html lang="nl">
    <head>
        <meta charset="utf-8" />
        <title>Lab 10</title>
        <script src="lab10script.js"></script>
    </head>
    <body>
        <form name="form">
            <input type="text" id="bedrag" placeholder="Vul bedrag in" />
            <select id="list">
                <option>dollar/euro</option>
                <option>euro/dollar</option>
                <option>ruble/euro</option>
                <option>euro/ruble</option>
            </select>
            <button type="button" onclick="myFunction()">Exchange</button>
        </form>
        <script>
            function myFunction() {
                var bedrag = document.getElementById("bedrag").value;
                var x = document.getElementById("list").selectedIndex;
                if (x == 0) { 
                    //log the value to console and verify the value
                    console.log("<br>test" + bedrag); 
                }
                else { 
                    console.log("<br>test" + bedrag); 
                }
            }
        </script>
    </body>
</html>

Answer 4

<input type="text" name="bedrag" placeholder="Vul bedrag in" />

换到这一行再试一次：

<input type="text" id="bedrag" placeholder="Vul bedrag in" />

Javascript 如何获取输入

Javascript how to get input

javascript

currency

converters