0
基本的には、クリックすると、div内のすべての段落を取得し、背景をハイライト表示する必要があるボタンを作成する必要があります。 次に、ボタンをクリックすると段落をハイライトする関数にボタンをリンクするために、対応するJSコードを（目立たないように）記述する必要があります。JS DOM - 邪魔にならないボタンでテキストを強調表示
ボタンは「トグル」の役割を果たす必要があります。つまり、段落がすでに強調表示されている場合は、ボタンをクリックするとハイライトされます。段落が強調表示されていない場合は、ボタンをクリックすると強調表示されます。ボタンのテキストはこれを反映するように変更する必要があります。ハイライトするにはクリックし、ハイライトを解除するにはクリックしてください。これまでのところ、これらの段落を反復処理する関数を作成しようとしていますが、ハイライトが機能していません。
** htmlのマークタグはテキストを強調表示することができます私のjsコードですか？ **
HTML：
<!DOCTYPE html>
<html>
<head>
<script src="task2.js"></script>
<style>
#poem {
padding: 10px;
margin-bottom: 10px;
color: blue;
font-size: 1.25em;
font-family: sans-serif;
background-color: silver;
border: 1px dashed black;
width: 30%;
}
</style>
</head>
<!- Modify code to add a button ->
<body>
<div id="poem">
<h2> How Many, How Much </h2>
<h4> by Shel Silverstein </h4>
<p> How many slams in an old screen door? </p>
<p> Depends how loud you shut it.</p>
<p> How many slices in a bread?</p>
<p> Depends how thin you cut it.</p>
<p> How much good inside a day? </p>
<p> Depends how good you live 'em. </p>
<p> How much love inside a friend? </p>
<p> Depends how much you give 'em. </p>
</div>
<button id="button"> Click to highlight </button>
</body>
</html>
JSコード：
function pageLoad() {
var button = document.getElementById("button");
button.onclick = okClick;
}
function okClick() {
var allParas = document.getElementsByTagName("p");
for (var i=0; i < allParas.length; i++) {
if(allParas[i].classList.contains('highlightClass')) {
allParas[i].classList.remove('highlightClass');
} else {
allParas[i].classList.add('highlightClass');
}
}
}
window.onload = pageLoad;
私はあなたのコードを試みたが、ハイライトは、私はここで質問 – DreamVision2017
に私のコードを更新し、動作していないと、作業[フィドル]（https://jsfiddle.net/m2xoggdk/）です。あなたのjsで行われたいくつかの変更と新しいクラスを追加しました。 [fiddle]（https://jsfiddle.net/m2xoggdk/） –