私は初心者プログラミングのクラスです。私たちは第4章だけですので、心に留めてください。このクラスでは、javascript
のHTMLを使用していますが、実際にはjavascript
にはまだ深入りしていません。今週の私のプロジェクトでは、2つのボタンを作成し、それぞれのボタンをクリックすると写真が1つずつ表示され、段落が表示されます。段落のボタンがありますが、イメージを追加する方法がわかりません。私がインターネット上で見つけたものはすべて、スーパーjavascript
です。ここに私のコードは、私はちょうどあなたが探しているものを達成するために<img>
の「スタイル」プロパティを使用することができ、ハハテキストと画像のHTMLボタン
<!doctype html>
<!--Web page that displays quotes at the click of a button click. -->
<!--============================================================= -->
<html>
<head>
<title>Project2</title>
</head>
<body>
<div style="text-align:center">
<p>
<h2> <span style="color:red">Favorite Animals</span> </h2>
</p>
<input type="button" value="Slow Loris" onmouseover="this.style.backgroundColor='red';" onmouseout="this.style.backgroundColor='white';" onclick="document.getElementById('outputDiv').innerHTML=
'This animal might look like a harmless, big-eyed baby ewok, but ' +
'the slow loris is one of the only venomous mammals in the world. ' +
'Its subtle nature makes it popular in the illegal pet trade, but this ' +
'furry creature also carries a toxin that is released from the brachial ' +
'gland on the sides of its elbows. If threatened, the loris can take ' +
'the toxin into its mouth and mix it with saliva. The animal may also ' +
'lick or rub its hair with this mixture to deter predators from attack. ' +
'The toxin can cause death by anaphylactic shock in some people.';">
<input type="button" value="Sloth" onmouseover="this.style.backgroundColor='red';" onmouseout="this.style.backgroundColor='white';" onclick="document.getElementById('outputDiv').innerHTML=
'Sloths—the sluggish tree-dwellers of Central and South America—spend ' +
'their lives in the tropical rain forests. They move through the canopy ' +
'at a rate of about 40 yards per day, munching on leaves, twigs and buds. ' +
'Sloths have an exceptionally low metabolic rate and spend 15 to 20 hours ' +
'per day sleeping. And surprisingly enough, the long-armed animals are ' +
'excellent swimmers. They occasionally drop from their treetop perches ' +
'into water for a paddle.';">
</div>
<div id="outputDiv"></div>
</body>
</html>
、あなたがイメージとoutputDivに挿入される段落をしたいです。そうですか? – Nil
チェルシーあなたはこれを間違った方法で見ている。なぜ画像やテキストを含むdivを作成しないのですか?ボタンをクリックするだけで表示されます。 – Mihailo