javascript innerHTMLを使用してボタンをクリックしたときにhtml画像を挿入します

なぜ画像ではなくテキストで動作しているのか理解しようとしています。 idタグ付きのdivにimageタグの代わりに "some text here"と表示しようとすると、それは動作します。理論的には私はinnerHTMLのjavascript innerHTMLを使用してボタンをクリックしたときにhtml画像を挿入します

<!DOCTYPE html> 
<html> 
<head> 
<link rel = "stylesheet" href = "jumai.css"> 
<link rel = "stylesheet" href = "bootstrap.css"> 
</head> 

<body> 
<div class = "container"> 

<div class = "col-md-2"> 
<p> Some text here </p> 
</div> 

<div class = "col-md-8"> 
<div class = "middlemenu"> 
<ul class = "list"> 
<li> <button type = "button" class = "btn btn-default" onclick= 
"myfunction()"> BESTSELLER BRANDS </button> </li> 
<li> <button type = "button" class = "btn btn-default">TRENDING NOW 
</button> 
</li> 
<li> <button type = "button" class = "btn btn-default">SHOP NAIJA BRANDS 
</button> </li> 
</ul> 

</div> 

<div id = "imagebox" > 



</div> 
</div> 

<div class = "col-md-2"> 

<p> sOME TEST HERE </p> 
</div> 

</div> 


<script> 

function myfunction(){ 
document.getElementById('imagebox').innerHTML = 
" <img src = "infinix.png" alt = "infinix">"; 
} 
</script> 
</body> 

</html>

出典

2017-04-17 fineboy1

[リンク]（http://stackoverflow.com/questions/11266104/javascripts-innerhtml-not-working-for- image-but-works-with-text）これを参照してください –

なぜあなたはinnerHTMLを使用せずに要素に画像を追加しますが、divを取得してからappendChildに画像を追加すると、element.src = 'images /burgerking.jpg '; – TGarrett

使用しているコードはどこですか？ – broodjetom

2つの問題は、まず、あなたがinnerHTMLプロパティの値を設定するために、同じ引用符を使用傾けると、再び使用しているのであなたのコードが動作しない動作しますので、「直前に\を追加例えば値の内側に、あなたは別の引用符を使用する必要がある

、srcとaltであなたの"は、innerHTMLプロパティ値"の始まりと同じである：

document.getElementById('imagebox').innerHTML = " <img src = "https://dummyimage.com/200x100/000/fff" alt = "infinix">";

正しい方法は、このような何かinnerHTMLのため"とsrcとaltため'を使用している。これを解決する

document.getElementById('imagebox').innerHTML = " <img src = 'https://dummyimage.com/200x100/000/fff' alt = 'infinix'>";

を、あなたのコードでは、関数を呼び出す必要が唯一の定義されていますが、使用されていません。コードの下にmyFunction()を追加するだけです。例えば

：実施例がある

function myfunction(){ 

... stuff ... 

} 

//Launch the function 
myfunction();

：https://jsfiddle.net/46dstzob/

出典

2017-04-17 20:56:52 TriForce

ボタンをクリックしても引用がうまくいけば、関数を呼び出す必要があります。ありがとうございます。 – fineboy1

を使用して画像を挿入することができなければならない画像を示すこと<img>素子自体を必要とするinnerHTMLのは、基本的には、取得したHTMLエレメントのコンテンツを設定するために使用されています。両方とも異なるシナリオです。

最初に、innerhtmlをテキストコンテンツで設定して見たテキストをいくつか設定します。

その他では、オブジェクトの種類を割り当てようとしています。

javascriptまたはjQueryを使用して画像を挿入する場合は、<img>という要素自体を「imagebox」に追加することで画像を挿入できます。

出典

2017-04-17 19:52:26

<script> 

function myfunction(){ 
document.getElementById('imagebox').innerHTML = 
" <img src = \"infinix.png\" alt = \"infinix\">"; 
} 
</script>

それは正しく

出典

2017-04-17 19:57:52 Osama

javascript innerHTMLを使用してボタンをクリックしたときにhtml画像を挿入します

答えて

関連する問題