使用 JavaScript 更改 HTML <p> 标记值

Question

我有一个 HTML 表单，允许用户输入派系名称并使用按钮提交：

 <form method="get">
    </br><button type="submit" onclick="createFaction()">create faction</button>
    <input placeholder="name" id="factionName" name="factionName"></input>
</form>

目前之所以是 GET ，纯粹是为了测试。

然后我有一个 JavaScript 函数来更改它的名称：

 <p id="test1"></p>

无论用户输入是什么。 JavaScript代码是

function createFaction() {
    var name = document.getElementById('factionName'),
    factionName = input.value;

    document.getElementById('test1').innerHTML = name;
}

但是，它不起作用。为什么？

原文由 james clarke 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

首先更改 type='button' 。而是使用提交 type="submit" 。它将提交页面，您将看不到已完成的更改。变化在这里：

 <button type="button" onclick="createFaction()">create faction</button>

然后在 JavaScript 中更改 name.value 以从 name 对象获取值：

 factionName = name.value;

 function createFaction() {
    var name = document.getElementById('factionName'),
    factionName = name.value;

    document.getElementById('test1').innerHTML = factionName;
}

 <form method="get">
    </br><button type="button" onclick="createFaction()">create faction</button>
    <input placeholder="name" id="factionName" name="factionName">
    </form>
<p id="test1"></p>

另一种方法是，

 function createFaction(faction) {
    document.getElementById('test1').innerHTML = faction;
}

 <input onchange="createFaction(this.value)" onkeyup="createFaction(this.value)" placeholder="type something ..." id="factionName" name="factionName">
<p id="test1"></p>

原文由 Niklesh Raut 发布，翻译遵循 CC BY-SA 4.0 许可协议