昨日、コードの効率改善について質問しました。今日、繰り返しのタスクを達成するためにコード行を少なくしようとするのと同じ精神で、別の質問があります。
次のコードがあります。
function myIntroductionText() {
introPos.style.display = 'block';
posOne.style.display = 'none';
posTwo.style.display = 'none';
posThree.style.display = 'none';
posFour.style.display = 'none';
posFive.style.display = 'none';
posSix.style.display = 'none';
posSeven.style.display = 'none';
posEight.style.display = 'none';
posNine.style.display = 'none';
posTen.style.display = 'none';
posEleven.style.display = 'none';
backButton.style.visibility = 'hidden';
}
function myPositionOne() {
introPos.style.display = 'none';
posOne.style.display = 'block';
posTwo.style.display = 'none';
posThree.style.display = 'none';
posFour.style.display = 'none';
posFive.style.display = 'none';
posSix.style.display = 'none';
posSeven.style.display = 'none';
posEight.style.display = 'none';
posNine.style.display = 'none';
posTen.style.display = 'none';
posEleven.style.display = 'none';
backButton.style.visibility = 'visible';
}
function myPositionTwo() {
introPos.style.display = 'none';
posOne.style.display = 'none';
posTwo.style.display = 'block';
posThree.style.display = 'none';
posFour.style.display = 'none';
posFive.style.display = 'none';
posSix.style.display = 'none';
posSeven.style.display = 'none';
posEight.style.display = 'none';
posNine.style.display = 'none';
posTen.style.display = 'none';
posEleven.style.display = 'none';
}
HTML は次のようになります。
<p class="textContent" id="introductionText">Introduction Text Goes Here</p>
<p class="textContent" id="position1">content1</p>
<p class="textContent" id="position2">content2</p>
<p class="textContent" id="position3">content3</p>
各位置 (つまり、introPos、posOne、posTwo) には対応する関数もあり、基本的に上記の関数と同じように見えますが、位置に基づいて表示が変わる点が異なります。
このタスクをより効率的にするために、ループや if/else ステートメントを使用できると考えています。getElementsByClassName('textContent') を使用してみました。これにより、そのクラスのすべての要素を含む配列が生成されたと思います。console.log によると、[p#introductionText.textContent、p#position1.textContent など...] が含まれています。そこで、ループを試みるために次のコードを書きました。
var blanks = document.getElementsByClassName("textContent") // this creates the array that I mentioned
for (item in blanks) {
if (blanks[0] === introductionText.textContent) {
blanks[0].style.display = 'block';
} else {
blanks[item].style.display = 'block';
}
}
p#introductionText.textContent を使用してみましたが、エラーが返されました。私は JavaScript に非常に慣れていないので、ここで非常にばかげたことをしている可能性があることを十分に認識していますが、何か助けていただければ幸いです。
編集: エラー メッセージには Uncaught SyntaxError: Unexpected tocken ILLEGAL と表示されます
また、私の目標は、一度に 1 つの位置のみを表示することです。ユーザーがposOneからposTwo、posThreeなどに移動できるようにする「戻る」および「次へ」ボタンがあります。したがって、posTwo を表示するだけでなく、posOne や posThree を非表示にする必要もあります。
ありがとう!