时间戳

首页 > 解决方案 > 用JS更改标题的简单功能

javascript - 用JS更改标题的简单功能

问题描述

我想编写简单的函数来更改文档的标题。

首先我尝试了这段代码：

  <head>
    <meta charset="utf-8">
    <title>Zmeň mě!</title>
  </head>
  <body>
    <input type="text" id="newTitle">
    <button type="button" onclick="titleChange()">sub</button>
  </body>

  <script type="text/javascript">

  var title, newTitle;
  title = document.title;
  newTitle = document.getElementById("newTitle").value;

  function titleChange(newTitle) {
    title = newTitle;
  }

  </script>

That didn't work so I was randomly changing it to this:

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Zmeň mě!</title>
  </head>
  <body>
    <input type="text" id="newTitle">
    <button type="button" onclick="titleChange()">sub</button>
  </body>

  <script type="text/javascript">

  function titleChange(newTitle) {
    document.title = document.getElementById("newTitle").value;
  }

  </script>

为什么第二个有效，而第一个无效？ 非常感谢您的回答。

标签： javascriptdom

解决方案

为什么第二个有效，而第一个无效？

问题有两个部分：

  1. 您从哪里获得新价值。
  2. 您将值分配到的位置。

获取新值

在

  function titleChange(newTitle) {
    title = newTitle;
  }

newTitle您正在从参数中获取新值。但是查看调用点 ( onclick="titleChange()")，您永远不会为参数传递值。

现在，在函数上方，您定义了一个具有相同名称的变量：

newTitle = document.getElementById("newTitle").value;

这没有任何影响，原因有两个：

该参数newTitle会隐藏同名变量，因此永远不会读取该变量的值。

var foo = 42;
function bar(foo) {
  console.log(foo);
}
bar(21); // logs 21, not 42

分配仅在页面加载时发生一次。此时输入字段还没有值。稍后对该字段的更改不会神奇地更新变量。

在您的第二个示例中，您正在读取事件处理程序中的输入字段值，即在执行处理程序时您正在获取当前输入值。

分配新值

JavaScript 是一种按值传递的语言。这基本上意味着，如果您将变量或对象属性的值分配给另一个变量，则会创建并分配该值的副本。新变量和“源变量”之间没有内在联系。因此分配给title不会document.title以任何方式影响。

这是一个简化的示例：

var foo = 42;
var bar = foo;
bar = 21;
console.log(foo); // still 42, assinging to 'bar' doesn't change 'foo'

document.title如您的第二个示例所示，直接分配给可以按预期工作。

推荐阅读