javascript - 使用 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;
}

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

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>