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>

它是什么时候得到的原因纯粹是为了测试.然后我有一个更改名称的js函数

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

无论用户输入的是什么.JS代码是

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>

然后更改name.valuejs以从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 somthing ..." id="factionName" name="factionName">
<p id="test1"></p>

Answer 2

onclick将通过按钮 type = Submit触发，该函数将如下所示：

function createFaction() {
    var name = document.getElementById('factionName').value;
    document.getElementById('test1').innerHTML = name;
}