使用名称为“example”的 html 中的值答案

【问题标题】：Using a value from html with the name="example"使用名称为“example”的 html 中的值
【发布时间】：2017-03-15 10:19:12
【问题描述】：

我创建了一个带有表单的页面，您可以在其中输入名称。当您提交名称时，该名称将存储在名称“bezeichnung”下。现在我想使用输入“bezeichnung”作为按钮标签。并将其附加到页面的正文中。

这是表格：

<head>
    <link rel="stylesheet" href="\User\stl.css"/>
</head>

    <body>
        <h1> Neue Station hinzufügen</h1>
        <form id="stationenformular" name="stationenformular" action="indexAktualisierung.html"  method="get">
            <div>
                <label for="bezeichnung">Bezeichung der neuen Station:</label>
                <input type="text" id="bezeichnung" name="bezeichung" />
            </div>
            <br><br>
            <div>
                <label for="ipadresse"> IP Adresse des  Raspberry Pi:</label>
                <input type="text" id="ipadresse" name="ipadresse"/text> 
            </div>
            <div>
            <br>
            <input type="submit" value="Abschicken"/>
            </div>
        </form>
    </body>
</head>

这是另一个 html 脚本中的函数：

var x = document.getElementsByName("bezeichnung");
var btn = document.createElement("BUTTON");    // Create a <button> element
var t = document.createTextNode(x);            // Create a text node
btn.appendChild(t);                            // Append the text to <button>
document.body.appendChild(btn);

【问题讨论】：

HTML 中有错字<input type="text" id="bezeichnung" name="bezeichung" /> 应该是<input type="text" id="bezeichnung" name="bezeichnung" />
您的 javascript 是否与您的 html 表单一样嵌入到同一个 html 文件中？
不，它在另一个 html 文件中

标签： javascript jquery html

【解决方案1】：

首先你的name 是bezeichung，而不是bezeichnung。同样getElementsByName 返回一个array-like object。您需要从元素中获取第一项；

var x = document.getElementsByName("bezeichnung")[0]; // Get the first 
var btn = document.createElement("BUTTON");    // Create a <button> element
var t = document.createTextNode(x.value);            // Create a text node with x's value
btn.appendChild(t);                            // Append the text to <button>
document.body.appendChild(btn);

参见示例。我默认添加了文本。

var x = document.getElementsByName("bezeichnung")[0];
var btn = document.createElement("BUTTON");    // Create a <button> element
var t = document.createTextNode(x.value);            // Create a text node
btn.appendChild(t);                            // Append the text to <button>
document.body.appendChild(btn);

<body>
    <h1> Neue Station hinzufügen</h1>
    <form id="stationenformular" name="stationenformular" action="indexAktualisierung.html"  method="get">
       <div>
           <label for="bezeichnung">Bezeichung der neuen Station:</label>
           <input type="text" id="bezeichnung" name="bezeichnung" value="Test"/>
       </div>
       <br><br>
       <div>
           <label for="ipadresse"> IP Adresse des  Raspberry Pi:</label>
           <input type="text" id="ipadresse" name="ipadresse"/text> 
       </div>
       <div>
          <br>
          <input type="submit" value="Abschicken"/>
       </div>
    </form>
</body>

【讨论】：

即var x = document.getElementsByName("bezeichnung")[0];

【解决方案2】：

要获得 bezeichnung 输入字段的唯一实例，您可以使用 var x = document.getElementsByName("bezeichnung")[0]; 或 var x = document.getElementById("bezeichnung");

正如 Suren Srapyan 所说，getElementsByName 返回具有该名称的所有元素的数组，因此您需要通过将位置放入所需对象的数组中来指定您的意思。

但是，由于您大概只想要一个 bezeichnung 实例，因此使用 getElementById 会更容易。

【讨论】：

我的问题是，如果我使用 getElementById，按钮中的文本现在是“null”，但如果我以“abc”的形式输入，它应该是“abc”我必须观察如果我正在处理两个不同的 html 文件？
如果 JavaScript 指向两个不同的 HTML 文件，要么按钮需要在两者中具有相同的 ID，要么您需要为另一个按钮编写单独的脚本（建议如果另一个按钮做一些不同的事情）

【解决方案3】：

var x = document.getElementsByName("bezeichnung");
var btn = document.createElement("BUTTON");    // Create a <button> element
var t = document.createTextNode(x);            // Create a text node                         
btn.parentNode.insertBefore(t, btn);        // Append the text to <button>
document.body.appendChild(btn);

【讨论】：

【解决方案4】：

尝试用 getElementById 改变 getElementsByName

var x = document.getElementById("bezeichnung");
var btn = document.createElement("BUTTON");    // Create a <button> element
btn.innerText = x.value;                            // Append the text to <button>
document.body.appendChild(btn);

Demo

【讨论】：