javascript - 读取表单值失败-Javascript

我试图从输入中读取值并将其填充到一个空div中。但是，该值正在被读取，但是当我单击submit按钮时，该值在空div上出现大约0.2秒，然后消失。。。有什么建议吗？
HTML格式：

 <div id="vuvedenaSuma">

 </div>

        <form action="">
            <input type="text" id="suma" required="required" placeholder="Въведи сума" name="Suma" />

            <button id="submit">Submit!</button>
        </form>

Javascript代码：

function valueRead(){
    var vuvedenaSuma = document.getElementById('suma').value;
    document.getElementById('vuvedenaSuma').innerHTML = vuvedenaSuma;
}

document.getElementById('submit').addEventListener('click',valueRead);

我想使用eventListener，而不是按钮上的onclick属性。

最佳答案

您的表单将在函数执行后立即提交。
您可以防止使用event.preventDefault()调用默认事件（表单提交），如下所示：

function valueRead(e){
    var vuvedenaSuma = document.getElementById('suma').value;
    document.getElementById('vuvedenaSuma').innerHTML = vuvedenaSuma;
    e.preventDefault();
}

https://jsfiddle.net/ez0qchyq/