h1 innerHTML 值不能正確顯示表單提交值

Question

我是 JavaScript 的新手。我正在嘗試將 HTML 中的 h1 標簽值更改為基於提交的表單的值。 但是，它只顯示一瞬間就消失了。 我想永久顯示該值。 感謝您的建議。 謝謝你。

問候語只出現了一瞬間。 我希望它永久顯示。 我懷疑問題在於 JS 代碼中事件偵聽器的觸發。

>！ HTML代碼

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Count</title>
        <script src="counter.js"></script>
    </head>
    <body>
        <h1>Cold</h1>
        <form>
            <input autofocus id="name" placeholder="Name" type="text">
            <input type="submit">
        </form>
    </body>
</html>

>！ JS代碼

document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('form').onsubmit = function() {
        const name = document.querySelector('#name').value;
        document.querySelector('h1').innerHTML = `Hello ${name}`;
        
    };
});

Answer 1

您必須將 preventDefault 屬性添加到事件中，這樣它就不會在提交時刷新頁面：

document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('form').onsubmit = function(event) {
        const name = document.querySelector('#name').value;
        event.preventDefault();
        document.querySelector('h1').innerHTML = `Hello ${name}`;
        
    };
});

h1 innerHTML 值不能正確顯示表單提交值

問題描述

1 個解決方案

解決方案1
-1 2023-01-26 04:51:11

h1 innerHTML 值不能正確顯示表單提交值

問題描述

1 個解決方案

解決方案1 -1 2023-01-26 04:51:11

解決方案1
-1 2023-01-26 04:51:11