Javascript 如何使用用戶輸入更改頁面標題

Question

我想做的是當用戶寫一些東西來輸入並提交它時，頁面將更改為輸入。

例子：

如果用戶在輸入中寫入“Web”，頁面標題應更改為“Web”

這是代碼：

記者：

document.getElementById("titleSumbitBtn").onclick = function (){
    var newTitle = document.getElementById("newTitle").textContent;
    document.getElementById("title").innerHTML = newTitle;
}

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title id="title">Web Editor</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <center><label id="originLabel">Welcome to Web Editor!</label><br></center>
    <br><label id="changeTitleLabel">Change the title of Web: </label><br>
    <input type="text" id="newTitle"><br>
    <button type="button" id="titleSumbitBtn">Change</button>
</body>
</html>

Answer 1

您可以像這樣為文檔分配新標題：

document.getElementById("titleSumbitBtn").onclick = function (){
    var newTitle = document.getElementById("newTitle").value;
    document.title = newTitle;
}

這是實際的實現，但請記住，它必須在 ID newTitle的 DOM 元素之后運行。

如果將<script>標記放在<head>中，則需要DOMContentLoaded ：

document.addEventListener('DOMContentLoaded', () => {
    document.getElementById("titleSumbitBtn").onclick = function (){
        var newTitle = document.getElementById("newTitle").value;
        document.title = newTitle;
    }
})

Answer 2

嘗試這個：

document.getElementById("titleSumbitBtn").addEventListener("click", function (){
var newTitle = document.getElementById("newTitle").value;
document.getElementById("title").innerText = newTitle;

})

Javascript 如何使用用戶輸入更改頁面標題

問題描述

2 個解決方案

解決方案1
5 已采納 2022-03-11 14:05:37

解決方案2
0 2022-03-11 14:30:58

Javascript 如何使用用戶輸入更改頁面標題

問題描述

2 個解決方案

解決方案1 5 已采納 2022-03-11 14:05:37

解決方案2 0 2022-03-11 14:30:58

解決方案1
5 已采納 2022-03-11 14:05:37

解決方案2
0 2022-03-11 14:30:58