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>

然后在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將觸發按鈕類型= submit，函數將如下所示：“ 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());
  });
});