ошибка доступа к значению атрибута в чистом виде JavaScript - PullRequest
Новая
       9

ошибка доступа к значению атрибута в чистом виде JavaScript

0 голосов
/ 13 апреля 2020

Я JavaScript новичок ie и пытаюсь получить значение настраиваемого атрибута, содержащегося в настраиваемом теге, в чистом JavaScript, соответственно проверить, существует ли атрибут.

Первая кнопка должна проверить, существует ли атрибут в диапазоне.

Вторая кнопка должна вывести значение атрибута.

Сообщение об ошибке, которое я получаю на консоли на обеих кнопках: 

TypeError: document.getElementById(...).getElementsByTagName(...)[0] is undefined

Это мой код. 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>

</head>
<body>


<span id="foo">The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</span>
<p/>
<span id="anotherfoo">The quick brown fox jumps over the lazy dog. The quick <baz><anothertag alternative="yellow">brown</anothertag> fox jumps over</baz> the lazy dog.</span>
<p/>
<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<button onclick="mysecondFunction()">Have a try with the second span</button>

<p id="anotherdemo"></p>

<script>
function myFunction() {
  var x = document.getElementById("foo").getElementsByTagName("anothertag")[0].getAttribute("alternative");
  console.log(x);
  document.getElementById("demo").innerHTML = x;
}

function mysecondFunction() {
  var y = document.getElementById("anotherfoo").getElementsByTagName("anothertag")[0].getAttribute("alternative"); 
  console.log(y);
  document.getElementById("anotherdemo").innerHTML = y;
}
</script>

</body>
</html>

Что я здесь не так делаю? Кто-нибудь может помочь и объяснить? Спасибо.

1 Ответ

0 голосов
/ 13 апреля 2020

Чтобы получить:

  1. Первая кнопка должна проверить, существует ли атрибут в диапазоне.

  2. Вторая кнопка должна вывести значение атрибута.

Вы можете сделать что-то вроде приведенного ниже фрагмента, в частности myFunction() должен проверить, существует ли x, если да, имеет ли он getAttribute("alternative") ? Если да, то это exists, иначе это doesn't exist. 

function myFunction() {
  var x = document
    .getElementById("foo")
    .getElementsByTagName("anothertag")[0];
  let exists =
    x && x.getAttribute("alternative") ? `exists` : `doesn't exist`;
  console.log(exists);
  document.getElementById(
    "demo"
  ).innerHTML = `attribute "alternative" ${exists}`;
}

function mysecondFunction() {
  var y = document
    .getElementById("anotherfoo")
    .getElementsByTagName("anothertag")[0]
    .getAttribute("alternative");
  console.log(y);
  document.getElementById("anotherdemo").innerHTML = y;
}
<span id="foo">The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</span>
<p></p>
<span id="anotherfoo">The quick brown fox jumps over the lazy dog. The quick <baz><anothertag alternative="yellow">brown</anothertag> fox jumps over</baz> the lazy dog.</span>
<p></p>

<button onclick="myFunction()">Try it</button>
<button onclick="mysecondFunction()">Have a try with the second span</button>

<p id="demo"></p>
<p id="anotherdemo"></p>

Возможно, вы захотите сделать приведенный выше код более пуленепробиваемым, среди прочего, сначала проверив, существует ли getElementById("foo"), и только потом проверите, есть ли getElementsByTagName("anothertag").

...