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