Javascript如何获取输入答案

【问题标题】：Javascript how to get inputJavascript如何获取输入
【发布时间】：2018-10-28 13:02:30
【问题描述】：

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

    <!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，所以有人可以帮助我吗？

【问题讨论】：

您没有 ID 为“bedrag”的元素。您有一个<input>，其name 为“bedrag”，但name 和id 属性不同。
另外document.write() 是显示结果的错误方式。在页面加载后调用document.write() 将完全覆盖整个 DOM。
注意：<input> 和 <meta> 标签不使用右斜线，而且从来没有。

标签： javascript currency converters

【解决方案1】：

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

换到这一行再试一次：

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

【讨论】：

【解决方案2】：

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

换到这一行再试一次：

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

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

【讨论】：

【解决方案3】：

用 id 替换输入中的 name 属性，如

<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>

【讨论】：

【解决方案4】：

在脚本中使用这一行，

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>

【讨论】：