在阅读表单输入后写回HTML;t工作(Javascript）

Writing back to HTML after reading form input doesn't work (Javascript)?

本文关键字：工作 Javascript HTML 写回 表单 输入      更新时间：2023-09-26

我尝试按照W3Schools上的简单示例，使用纯Javascript从表单中读取值并写回HTML页面。

代码请参考JSFiddle：

<body>
    <form action="index.javascript.html" onsubmit="omzetten()">
        <fieldset>
            <legend>Omzetten naar decimaal stelsel:</legend>
            <p class="loginlabel">Getal</p>
            <input type="text" id="getal" class="loginfield" />
        </fieldset>
        <br/>
        <input type="button" id="omzetten" value="Omzetten" />
    </form>
    <p id="antwoord">[empty]</p>
</body>

在文件app_javascripts.js的子目录/js中（在标题中引用）：

function omzetten() {
     var getal = document.getElementById("getal");
    var bronstelsel = 2;
    var antwoord = 0;
    var j = 0;
    for (var i = getal.length - 1; i >= 0; i--) {
        antwoord += getal.substr(i, 1) * Math.pow(bronstelsel, j);
        j++;
    }
    var antwoordText = document.getElementById("antwoord");
    antwoordText.innerHTML = antwoord;
}

为什么结果（"antwoord"）没有显示在id为"antwood"的段落元素中？

您有几个问题。

首先，您需要将输入更改为type="submit"，以便它将调用表单的onsubmit处理程序。另一个选项是将函数调用放在按钮的onclick属性中。如果您没有将表单提交到服务器，那么实际上不需要输入位于<form>中。

其次，您需要将return false;添加到onsubmit中，这样它就不会实际提交表单

第三，您为该函数指定了与提交按钮的id相同的名称。这样做的问题是ID会自动转换为全局变量，从而替换包含函数的全局变量。在下面的代码中，我只是删除了ID，因为它没有用于任何用途。

第四，要从文本字段中获取输入，需要获取其.value属性：

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

特别是对于小提琴，你需要从左上角的菜单中选择一个"无包裹"选项。否则，所有的Javascript都在window.onload函数内，并且函数不在内联Javascript在标记中使用的全局范围内。

function omzetten() {
  // inputRead:
  var getal = document.getElementById("getal").value;
  var bronstelsel = 2;
  var antwoord = 0;
  var j = 0;
  for (var i = getal.length - 1; i >= 0; i--) {
    antwoord += getal.substr(i, 1) * Math.pow(bronstelsel, j);
    j++;
  }
  var antwoordText = document.getElementById("antwoord");
  antwoordText.innerHTML = antwoord;
}
<form action="index.javascript.html" onsubmit="omzetten(); return false;">
  <fieldset>
    <legend>Omzetten naar decimaal stelsel:</legend>
    <p class="loginlabel">Getal</p>
    <input type="text" id="getal" class="loginfield" />
  </fieldset>
  <br/>
  <input type="submit" value="Omzetten" />
</form>
<p id="antwoord">[empty]</p>

尝试将按钮更改为提交：

<input type="submit" id="omzetten" value="Omzetten" />

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

返回一个Element。但是，您将元素视为字符串。

使用

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

以从"getal"元素中检索值。

此外，您的函数从不执行，因为您的表单从不提交。您需要"提交"类型的输入。

提交表单后更新页面可能不是您想要的。你可能想使用点击按钮而不是提交表格。

这是一个更新的Fiddle。我从onsubmit改为onclick（在按钮上），修复了上面描述的.value问题，并更改了函数名称，因为它与按钮ID冲突。

相关文章：