在纯JavaScript中访问属性值时出错_Javascript_Html_Getelementbyid

在纯JavaScript中访问属性值时出错

javascript html

在纯JavaScript中访问属性值时出错,javascript,html,getelementbyid,Javascript,Html,Getelementbyid,我是一名JavaScript新手，尝试获取纯JavaScript中自定义标记中包含的自定义属性的值，并分别检查该属性是否存在第一个按钮应该测试属性是否存在于范围中第二个按钮应该输出属性的值控制台上的两个按钮上显示的错误消息是： TypeError: document.getElementById(...).getElementsByTagName(...)[0] is undefined TypeError:document.getElementById（…）.getElementsByT

我是一名JavaScript新手，尝试获取纯JavaScript中自定义标记中包含的自定义属性的值，并分别检查该属性是否存在

第一个按钮应该测试属性是否存在于范围中

第二个按钮应该输出属性的值

控制台上的两个按钮上显示的错误消息是：

TypeError: document.getElementById(...).getElementsByTagName(...)[0] is undefined TypeError:document.getElementById（…）.getElementsByTagName（…）[0]未定义这是我的密码

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


测验
敏捷的棕色狐狸跳过了懒狗。敏捷的棕色狐狸跳过了懒狗。

敏捷的棕色狐狸跳过了懒狗。敏捷的棕色狐狸跳过了懒狗。

试试看

试一下第二个跨度

函数myFunction（）{
var x=document.getElementById（“foo”）.getElementsByTagName（“anothertag”）[0].getAttribute（“alternative”）；
控制台日志（x）；
document.getElementById（“demo”）.innerHTML=x；
}
函数mysecondFunction（）{
var y=document.getElementById（“anotherfoo”）.getElementsByTagName（“anothertag”）[0].getAttribute（“alternative”）；
控制台日志（y）；
document.getElementById（“anotherdemo”）.innerHTML=y；
}

我做错了什么？有人能帮忙解释一下吗？谢谢。

为了获得：

第一个按钮应该测试属性是否存在于范围中

第二个按钮应该输出属性的值

您可以像下面的代码片段一样执行操作，特别是

myFunction（）

应该检查

是否存在，如果存在，它是否有

getAttribute（“可选”）

？如果是，则它

存在

，否则它

不存在

函数myFunction（）{
var x=文档
.getElementById（“foo”）
.getElementsByTagName（“另一个标签”）[0]；
存在=
x&&x.getAttribute（“可选”）？`exists`:`notexists`；
console.log（存在）；
document.getElementById(
“演示”
).innerHTML=`attribute“alternative”${exists}`；
}
函数mysecondFunction（）{
var y=文档
.getElementById（“另一个foo”）
.getElementsByTagName（“另一个标签”）[0]
.getAttribute（“备选方案”）；
控制台日志（y）；
document.getElementById（“anotherdemo”）.innerHTML=y；
}

敏捷的棕色狐狸跳过了懒狗。敏捷的棕色狐狸跳过了懒狗。

试试看试一下第二个跨度

两件事：1

getElementById

是

document

的一种方法，而不是

document.body

。2.

getElementByID

getElementByID

。JavaScript区分大小写。所以：

document.getElementById

。不确定

getElementById

是否应用于

document.body

。。。我想应该是从

document

object调用的谢谢，我已经相应地编辑了这篇文章。错误消息改变了很多hanks：我只是想知道为什么行“var x=document.getElementById（“foo”）.getElementsByTagName（“anothertag”）[0].getAttribute（“alternative”）；”给了我这个错误。我用web上的类似示例（w3schools和其他）对此进行了测试，它预期不起作用，但从未产生错误id为“foo”的

span

“foo”没有任何标记为另一个标记的元素，这就是为什么您会看到这个错误，这也是我上面的代码片段为您检查的：）您从未使用id为“anotherfoo”的

span