Блог

Главная - Вопросы по программированию - Простая функция для изменения заголовка с помощью JS

Простая функция для изменения заголовка с помощью JS

#javascript #dom

#javascript #dom

Вопрос:

Я хотел закодировать простую функцию для изменения заголовка документа.

Сначала я попробовал этот код:

   <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>

Почему второй работает, а первый нет?
Большое вам спасибо за ответы.

Ответ №1:

Почему второй работает, а первый нет?

Проблема состоит из двух частей:

  1. Откуда вы получаете новое значение.
  2. Где вы присваиваете значение.

Получение нового значения

В

   function titleChange(newTitle) {
    title = newTitle;
  }

вы получаете новое значение из newTitle параметра. Но, глядя на callsite ( 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 , как и во втором примере, работает должным образом.

Ответ №2:

вы начинаете с JavaScript?

document.title это тип string.

 > typeof(document.title)
"string"

Итак, когда вы присваиваете title = document.title; в вашем первом примере, вы фактически копируете строковое значение.

Ответ №3:

Когда вы объявляете переменную title с первой попытки, вы просто сохраняете ее текущее значение в переменной. Во втором случае вы непосредственно устанавливаете document.title в другое значение. При таком подходе вам не нужно передавать функции переменный новый заголовок, поскольку вы все равно его не используете. Попробуй:

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

Ответ №4:

Я думаю, что это может быть связано с параметром. Вы дали параметр newTitle своей функции, когда определяли ее, но не использовали его при вызове своей функции. Вы можете попробовать этот код

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