Javascript更新文本而无需刷新页面

Question

Just learning javascript now. I want to make a remembrance ribbon where a persons name is added via a form. I have it working but just after it happens the page refreshes and it ends up blank. Is there a quick way to achieve this without a page refresh.

https://thimbleprojects.org/mrcpower/573757

Answer 1

By default, when you submit a form the page will refresh. So to prevent that you can add this to the top of your submit event handler function.

function changeText(event) {
    event.preventDefault();
}

Answer 2

try this code:

<input type="text" name="" id="yourInputId">
<button onclick="submit()">submit</button>
<div id="ribbonId"></div>
<script type="text/javascript">
function submit(){
    var a = document.getElementById('yourInputId').value;
    document.getElementById('ribbonId').innerHTML = a;
}