0
このコードでは、2番目の順序付けられていないリスト内の最後のliタグをターゲットにして、「バルサミコ酢」のテキストを「kale」に置き換えて、最後の項目のテキスト内容をpタグ - 'stuff'だけでなく、class = "cool"の属性を変更に加えます。DOM Beginner Navigation problems
は、現在だけでのdocument.getElementById（ "アイテム"）は任意のヘルプは
<!DOCTYPE html>
<html>
<head>
<style>
#items li {
width: 400px;
list-style: none;
padding: 10px 0px;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-right: 1px solid black;
}
.cool {
background-color: aqua;
}
.hot {
background-color: crimson;
}
.warm {
background-color: green;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="navContainer">
<ul id="sideBar">
<a href="LandingPage.html">
<li>Home</li>
</a>
<li id="dropdown">Applications
<div class="dropdown-content">
<a href="CalculatorPageApp.html">Simple Calculator</a>
<a href="ToDoListApp.html">Link 2</a>
<a href="#">Link 3</a>
</div>
<li>
<a href="Survey.html">
<li>Survey</li>
</a>
<a href="Calendar.html">
<li>Calendar</li>
</a>
<a href="Contact.html">
<li>Contact Us</li>
</a>
</ul>
<!--- end of sidebar -->
</div>
<!--- end of side container -->
<h1 id="header">List King</h1>
<h2>Buy groceries</h2>
<ul id="items">
<li id="one" class="hot"><em>fresh</em>figs</li>
<li id="two" class="hot">pine nuts</li>
<li id="three" class="hot">honey</li>
<li id="four">balsamic vinegar</li>
</ul>
<p id="thing">hi</p>
</div>
<!---End wrapper --->
<script>
var stuff = document.getElementById('thing');
var startItem = document.getElementsByTagName('ul')[1];
var lastItem = startItem.lastChild;
var text = lastItem.nodeValue;
stuff.textContent = text;
text.replace('balsamic vinegar', 'kale');
lastItem.setAttribute('class','cool');
</script>
</body>
</html>
エラーメッセージを使用してください。コードスニペットを実行すると、 'lastItem.setAttributeは関数ではありません。 'setAttribute'が実際の関数であることを知っているので、おそらく' lastItem'で何か問題があります。だからステップ1をデバッグしてください：varを宣言した直後に 'console.log（lastItem）'を追加して、それが返すものを見てください。 – jack
'lastChild'の代わりに' lastElementChild'を試してください –
* lastChild *は要素、テキストノード、コメントなどです。テキストノードは* setAttribute *のような要素APIメソッドを実装していません。 – RobG