Change an HTML <p> tag value with JavaScript

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?