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>

然后更改js中的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 somthing ..." id="factionName" name="factionName">
<p id="test1"></p>

Answer 2

onclick将触发按钮类型=提交，功能将如下所示：“ function createFaction() { var name = document.getElementById('factionName').value; document.getElementById('test1').innerHTML = name; }

Answer 3

你甚至不需要一个表格，而且功能也可以变得更简单 - 只需这样做：

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

<button onclick="createFaction()">create faction</button>
<input placeholder="name" id="factionName" name="factionName"></input>

<p id="test1"></p>

Answer 4

由于您没有尝试将数据发送到服务器，因此您无需将其包装到form中，因此您可以跳过它。我也会使用jQuery：

<button id="factionBtn">create faction</button>
<input placeholder="name" id="factionName" name="factionName">
<p id="test1"></p>

和

$(document).ready(function createFaction() {
    var $paragraph = $('#test1');
  var $factionName = $('#factionName');

  $('#factionBtn').click(function(e) {
      console.log($factionName.val());
    $paragraph.text($factionName.val());
  });
});

JavaScript更改html <p>标记值

4 个答案: