Почему document.getElementById ('foo'). Value не является ссылкой? - PullRequest
Новая
       8

Почему document.getElementById ('foo'). Value не является ссылкой?

0 голосов
/ 02 декабря 2018

Я играю со следующей функцией, и мне это нравится:
var $ = function( id ) { return document.getElementById( id ); };

Для моего текущего кода я ТОЛЬКО когда-либо ссылаюсь на каждый элемент value.
Итак, я подумал: «Почему бы просто не обновить мою функцию, включив в нее .value?

Так что это прекрасно работает: 

var $ = function( id ) { return document.getElementById( id ); };
 $("foo").value = whatever // WORKS JUST FINE :)

, но это ломается: 

var $ = function( id ) { return document.getElementById( id ).value; };
$("foo") = whatever // Left side of assignment is not a reference

Думаю, у меня есть представление о том, что происходит, но, поскольку трудно выразить это словами, я бы предпочел предположить, что я не прав.

Так что же здесь происходит?

Кстати, пожалуйста, не стесняйтесь комментировать:

  • Это ошибка ссылки, как я предполагаю?
  • Есть ли способ, которым яМожно ли выделить мой код, чтобы лучше указать на различия между каждой строкой?
  • Как я мог написать свой код, чтобы показать ошибку, причудливую, как эта картинка, а не текст моего комментария (особенно как сделать его меньше)?my error image

Ответы [ 2 ]

0 голосов
/ 02 декабря 2018

Во второй функции возвращаемое значение $("foo") является строкой.Вы не можете назначить строку: 

var $ = function( id ) { return document.getElementById( id ).value; };
console.log(typeof $("foo"), $("foo"))
<input id="foo" value = "Bar"/>

Есть много вариантов.Вы можете позволить вашей функции принимать второй параметр, который используется для установки значения: 

var $ = function(id, val) {
  let el = document.getElementById(id)
  if (val !== undefined) {
    el.value = val
  }
  return el
}

console.log($("foo", "test"))
<input id="foo" value="Bar" />

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

0 голосов
/ 02 декабря 2018

Элемент .value является на самом деле установщиком / получателем.Когда следующее 

document.getElementById( id ).value

оценивается как выражение (как в $, где вы пытаетесь его вернуть), а не назначается, вызывается метод полученияи это оценивает примитив.Итак, интерпретатору: 

return document.getElementById( id ).value;

превращается во что-то вроде 

return 'someValue';

Итак, когда вызывается $, возвращается некоторая строка, но так же, как 

'someValue' = 'newValue'

не работает, не работает 

$("foo") = 'newValue';

Для того, что вы пытаетесь сделать, чтобы работать, вам придется вызвать установщик, назначив .value свойство .Как только .value был оценен как выражение (например, справа от return), вы уже вызвали метод получения.

Один из возможных методов вызова метода установки:

const set$ = (id, newVal) => {
  document.getElementById(id).value = newVal;
};
set$('foo', 'myNewVal');
...