ボタンのテキストと段落の背景を切り替えます。

先生は、JSの宿題をするように教えてくれました。ボタンのテキストと段落の背景を切り替えます。

JavaScriptがここ

window.onload = function() { 
    var button = document.getElementsByTagName("button"); 
    button[0].onclick = changeBackground; 
} 

function changeBackground() { 
    var allParas = document.getElementsByTagName("p"); 
    for (var i = 0; i < allParas.length; i++) { 
    allParas[i].style.backgroundColor = "yellow"; 
    } 
}

は、タスクの詳細です：

は、ボタンを追加するためのHTMLコードを変更します。クリックしたときに段落をハイライトする関数にボタンをリンクするために、対応するJSコードを（目立たないように）記述します。ボタンは「切り替え」の役割を果たす必要があります。つまり、段落が既に強調表示されている場合は、ボタンをクリックすると強調表示されます。段落が強調表示されていない場合は、ボタンをクリックすると強調表示されます。ボタンのテキストはこれを反映するように変更する必要があります（下記参照）。この作業を行うために追加の変数を導入することができます。

出典

2017-11-12 luka zhang

あなたの画像はありません。 –

あなたは宿題をクリックする必要があります..外部リンクがあります。なぜか分かりません。 –

@lukazhang：これはあなたの宿題なので、あなたには単なる手がかりを与えようとしています。そうです。あなたはそれを理解しなければなりません、あなたのコードが動作し、すべてのテキストが黄色でハイライト表示されたら、再度クリックすると消えますか？（Toggle？）変数を黄色にすると、トグルできるようになります。黄色の場合は白、白の場合は黄色、これはクリックでのみ発生します – Jaya

：

document.getElementById("button").addEventListener("click", function() { 
 
    [].forEach.call(document.querySelectorAll("p"), p => { 
 
    p.classList.toggle("highlight"); 
 
    }); 
 
    this.innerHTML = (this.innerHTML === "Highlight") ? "Unhighlight" : "Highlight"; 
 
})

.highlight { 
 
    background: yellow; 
 
}

<p> 
 
    Cultivar brewed, coffee, spoon breve lungo spoon robust black. Barista percolator doppio, cup mug, crema, crema acerbic wings mug pumpkin spice. Lungo, aromatic, iced et, cup americano galão coffee to go. 
 
</p> 
 
<p> 
 
    Cultivar brewed, coffee, spoon breve lungo spoon robust black. Barista percolator doppio, cup mug, crema, crema acerbic wings mug pumpkin spice. Lungo, aromatic, iced et, cup americano galão coffee to go. 
 
</p> 
 
<button id="button">Highlight</button>

出典

2017-11-12 02:44:30 Sun

申し訳ありませんが、jQueryを使用していますか？多分私にとってはうまくいかないでしょう。先生にJavaScriptを使用するように依頼してください。 –

これはJavaScriptです！ – Sun

CSSを無効にして他のボタンにリンクする別の関数を記述するだけです。

function unchangeBackground(){ 
for (var i = 0; i < allParas.length; i++) { 
    allParas[i].style.backgroundColor = " "; 
} }

出典

2017-11-12 00:33:11

動作しません。ここには次のタスクがあります：ボタンに追加するHTMLコードを変更します。クリックしたときに段落をハイライトする関数にボタンをリンクするために、対応するJSコードを（目立たないように）記述します。ボタンは「切り替え」の役割を果たす必要があります。つまり、段落が既に強調表示されている場合は、ボタンをクリックすると強調表示されます。段落が強調表示されていない場合は、ボタンをクリックすると強調表示されます。ボタンのテキストはこれを反映するように変更する必要があります（下記参照）。この作業を行うために追加の変数を導入することができます。 –

私は、スタイルが追加されているかどうかをチェックするif statesmenを書く必要があるトグルを作成することをお詫び申し上げます。ここにはすばらしい例があります：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_toggle_hide_show –

あなたはこのことを意味するか：classList.toggleで

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <meta name="author" content="K."> 
 

 
\t \t <title>Someone's assignment</title> 
 

 
\t \t <style> 
 
\t \t \t .yellow 
 
\t \t \t { 
 
\t \t \t \t background-color: yellow; 
 
\t \t \t } 
 
\t \t </style> 
 
\t </head> 
 
\t <body> 
 
\t \t <button id="toggle" type="button">Toggle highlighting</button> 
 
\t \t <!-- If you don't give it type="button", it works as a submit button. --> 
 

 
\t \t <p> 
 
\t \t \t Ni hao, Wo jiao K.. 
 
\t \t </p> 
 
\t \t <p> 
 
\t \t \t And this is another paragraph. 
 
\t \t </p> 
 

 
\t \t <script> 
 
\t \t \t const toggle_button = document.getElementById("toggle"); 
 
\t \t \t toggle_button.addEventListener("click", _ => { 
 
\t \t \t \t if(toggle_button.getAttribute("data-state") === "on") 
 
\t \t \t \t { 
 
\t \t \t \t \t toggle_button.setAttribute("data-state", "off"); 
 
\t \t \t \t } 
 
\t \t \t \t else 
 
\t \t \t \t { 
 
\t \t \t \t \t toggle_button.setAttribute("data-state", "on"); 
 
\t \t \t \t } 
 
\t \t \t \t const on = toggle_button.getAttribute("data-state") === "on"; 
 
\t \t \t \t Array.from(document.querySelectorAll("p")).forEach(p => { 
 
\t \t \t \t \t if(on) 
 
\t \t \t \t \t { 
 
\t \t \t \t \t \t p.classList.add("yellow"); 
 
\t \t \t \t \t } 
 
\t \t \t \t \t else 
 
\t \t \t \t \t { 
 
\t \t \t \t \t \t p.classList.remove("yellow"); 
 
\t \t \t \t \t } 
 
\t \t \t \t }); 
 
\t \t \t }); 
 
\t \t </script> 
 
\t </body> 
 
</html>

出典

2017-11-12 01:20:48

はいそれです！どうも！ –

@lukazhang✓をクリックしてください。 –

ボタンのテキストと段落の背景を切り替えます。

答えて

関連する問題