JavaScript change html <p> tag value

Question

I have an HTML form that allows a user to type in the name of a faction and submit it with a button:

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

The reason it is GET at the moment is purely for testing.

I then have a JavaScript function that changes the name of this:

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

to whatever the users input was. The JavaScript code is

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

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

However, it doesn't work. Why?

Answer 1

First change type='button'. Instead use submit, type="submit". It will submit the page and you will not see changes done. The change is here:

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

Then change name.value in JavaScript to get the value from the name object:

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>

Another way to do this is,

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>