2017-09-23 25 views
-1

私は初心者プログラミングのクラスです。私たちは第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>

+0

、あなたがイメージとoutputDivに挿入される段落をしたいです。そうですか? – Nil

+1

チェルシーあなたはこれを間違った方法で見ている。なぜ画像やテキストを含むdivを作成しないのですか?ボタンをクリックするだけで表示されます。 – Mihailo

答えて

0

をランダムトピックを選びました。スタイルプロパティ内でdisplay:noneを設定して<img>を非表示にすることができます。もう一度表示させるには、ボタンがクリックされたときに表示をdisplay:inlineに戻します。次のことを試してみてください。

<!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> 
<img id='slow' src='slowLoris.jpg' alt='Slow Loris' style='width:200px;height:150px;display:none;'> 
<img id='sloth' src='sloth.jpg' alt='Sloth' style='width:200px;height:150px;display:none;'> 
</p> 


<input type="button" value="Slow Loris" 
onmouseover="this.style.backgroundColor='red';" 
onmouseout="this.style.backgroundColor='white';" 
onclick=" 
document.getElementById('sloth').style='width:200px;height:150px;display:none;' 
document.getElementById('slow').style='width:200px;height:150px;display:inline;' 
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('slow').style='width:200px;height:150px;display:none'; 
document.getElementById('sloth').style='width:200px;height:150px;display:inline;' 
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> 

編集
あなたのコードビットを変更する気にしない場合は、クリーンな解決策は次のようになります。

<!doctype html> 
<!--Web page that displays quotes at the click of a button click. --> 
<!--============================================================= --> 
<html> 
<head> 
<title>Project2</title> 
</head> 
<body style='text-align:center'> 

<h2> <span style="color:red">Favorite Animals</span> </h2> 

<div id='slow' style='text-align:center;display:none'>  
    <img src='slowLoris.jpg' alt='Slow Loris'> 
    <p>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.</p> 
</div> 

<div id='sloth' style='text-align:center;display:none'>  
    <img src='sloth.jpg' alt='Sloth'> 
    <p> 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.</p> 
</div> 


<input type="button" value="Slow Loris" 
onmouseover="this.style.backgroundColor='red';" 
onmouseout="this.style.backgroundColor='white';" 
onclick=" 
document.getElementById('slow').style='text-align:center;display:inline'; 
document.getElementById('sloth').style='text-align:center;display:none'"> 

<input type="button" value="Sloth" 
onmouseover="this.style.backgroundColor='red';" 
onmouseout="this.style.backgroundColor='white';" 
onclick=" 
document.getElementById('sloth').style='text-align:center;display:inline'; 
document.getElementById('slow').style='text-align:center;display:none'"> 

</div> 
</body> 
</html> 
0

シンプルなだけ見る、内部の画像を置きますjsfiddle

<input type="button" value="Slow Loris" 
onmouseover="this.style.backgroundColor='red';" 
onmouseout="this.style.backgroundColor='white';" 
onclick="document.getElementById('outputDiv').innerHTML= 
'<img src=https://www.thepharmaletter.com/media/image/actavis-logo-small.jpg>' + 
'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.';"> 

https://jsfiddle.net/bxcz3f8g/

0

プロパティ名が示すように、innerHTMLは、テキストだけでなく、完全なHTMLコンテンツでもあります。有効なHTMLをその中に入れることができます。また、良い習慣に従って、それらの操作を別々のjsファイルに書き込んでそれをインポートする必要があります。あなたは、例えば、画像を挿入するには、画像タグ<img>を使用する必要が

function addContent(event) { 
 
    document.getElementById('outputDiv').innerHTML = 
 
    '<img width="80" src="https://i.ytimg.com/vi/n7gcats5uCQ/maxresdefault.jpg"/><br/><p>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.</p>' 
 
}
<button onClick="addContent()">Sloth</button> 
 
<div id="outputDiv" />

0

ここ

<img src="https://www.internationalanimalrescue.org/sites/default/files/sumatran_slow_loris.jpg"> 

画像のソースにsrc点の値。あなたもあなたのコンピュータから1つを使用することができます(あなたのhtmlファイルからの相対パスを指定するだけです)。

その他の点がいくつかあります。 <button>を使用してボタンを作成できます。 <input>は、ユーザー入力フィールドを作成することです。 HTMlをJavascriptコードから分離して、そのコードで表示プロパティを切り替えるほうがよいでしょう(既に学習している場合は、これらのコードをボタン作成とは別の場所に移動することもできます)。ボタンをクリックするだけで

<div style="text-align:center"> 
 
<p> 
 
<h2> <span style="color:red">Favorite Animals</span> </h2> 
 
</p> 
 

 

 
<button type="button" 
 
onmouseover="this.style.backgroundColor='red';" 
 
onmouseout="this.style.backgroundColor='white';" 
 
onclick="document.getElementById('outputDiv1').style.display = 'block'; document.getElementById('outputDiv2').style.display = 'none'">Slow Loris</button> 
 

 
<button type="button" 
 
onmouseover="this.style.backgroundColor='red';" 
 
onmouseout="this.style.backgroundColor='white';" 
 
onclick="document.getElementById('outputDiv2').style.display = 'block'; 
 
document.getElementById('outputDiv1').style.display = 'none'"> Sloth</button> 
 

 
</div> 
 

 
<div id="outputDiv1" style="display:none">slow loris<img src="https://www.internationalanimalrescue.org/sites/default/files/sumatran_slow_loris.jpg" alt="loris" height="100" width="140"></div> 
 
<div id="outputDiv2" style="display:none">sloth<img src="http://kids.nationalgeographic.com/content/dam/kids/photos/animals/Mammals/Q-Z/sloth-beach-upside-down.adapt.945.1.jpg" alt="sloth" height="100" width="140"></div>

関連する問題