複数のボタンを使ってHTMLで画像を変更する

5つの画像と5つのボタンがありますが、現在は1つのボタンだけです。ボタンをクリックすると、そのボタンに関連付けられている画像のみを表示します。そのためには、画像パスをパラメータとして取得する単一の関数を記述したいと考えています。私はJavaScriptに非常に新しいです、ベローは、私は少しを発見し、編集したコードです：あなたは逆コンマの一連のに必要な機能で文字列を渡すとき、あなたのコードで複数のボタンを使ってHTMLで画像を変更する

<script> 
    function pictureChange(path) { 
     console.log(path); 
     document.getElementById("theImage").src=path; 
    } 
</script> 
<body> 
    <img id="theImage" src="http://31.media.tumblr.com/18b5f8f0a00ad01e50f7ae2f513be52d/tumblr_msqcl4iwM01soh1p8o1_500.png"> 
    <p><input type="button" id="theButton" value="click me!" onclick="pictureChange("http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh1p8o1_500.png")"></p> 
</body>

出典

2017-08-21 SpaceMan

現在の問題は、あります。例えば ""を使用しているときには、その中に一つの逆括弧しか使用できません。

<script> 
 
function pictureChange(path) { 
 
console.log(path); 
 
document.getElementById("theImage").src=path; 
 
} 
 
</script> 
 
<body> 
 
<img id="theImage" src="http://31.media.tumblr.com/18b5f8f0a00ad01e50f7ae2f513be52d/tumblr_msqcl4iwM01soh1p8o1_500.png"> 
 
<p><input type="button" id="theButton" value="click me!" onclick="pictureChange('http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh1p8o1_500.png')"></p> 
 
</body>

5枚の画像を表示するために、あなたも、単一のボタンを使用することができます。 あなたは、ボタンのクリックで画像ソースの配列を作成し、インデックスを渡すことができます。また、あなたの現在のスニペットでやっていることを行うことができます。 ボタンをクリックすると、が表示されます。

また、単一のボタンの場合、イメージsrcを渡してそのsrcインデックスのインデックスを配列で探し、そのインデックスから次のインデックスに変更し、ソースをイメージ要素に割り当てます。 最後のインデックスがsrcよりも0であるかどうかを確認してください。インデックスが割り当てられると、エラーが発生します。

スニペット：css 表示：インレーブロックプロパティが役立ちます。デフォルトで

img { 
 
    width:85%; 
 
} 
 
p { 
 
    display: inline-block; 
 
}

<script> 
 
function pictureChange(path) { 
 
console.log(path); 
 
document.getElementById("theImage").src=path; 
 
} 
 
</script> 
 
<body> 
 
<img id="theImage" src="http://31.media.tumblr.com/18b5f8f0a00ad01e50f7ae2f513be52d/tumblr_msqcl4iwM01soh1p8o1_500.png"> 
 
<p><input type="button" id="theButton" value="click me!" onclick="pictureChange('http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh1p8o1_500.png')"></p> 
 
</body>

出典

2017-08-21 08:59:58

おかげで、それは今働いている多くとして使用することができます！ボタンを画像の右上の横に配置するにはどうしたらいいですか？ – SpaceMan

アップデートされたスニペットを確認してください –

ちょっとチャウハン、ありがとうございます。私はオリジナルのサイズで画像を保持し、画像の上にボタンを置くだけで、右上に配置したいと思います。 – SpaceMan

は今、それはあなたが同じ文字で巣することはできません。原因あなたの「」あなたは、ブラウザを混乱させ、働いているので、また、あなたは、画像の幅を変更する必要がありますときに巣

function pictureChange(path) { 
 
console.log(path); 
 
document.getElementById("theImage").src=path; 
 
}

<img id="theImage" src="http://31.media.tumblr.com/18b5f8f0a00ad01e50f7ae2f513be52d/tumblr_msqcl4iwM01soh1p8o1_500.png"> 
 
<p><input type="button" id="theButton" value="click me!" onclick="pictureChange('http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh1p8o1_500.png')"></p>

出典

2017-08-21 09:00:36

Uの間違った「交互」としなければなりません使用上の記号"。 onclickの機能pictureChangeには、"というシンボルがあり、html throw構文エラーがあります。

uは"

onclick="pictureChange('http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh1p8o1_500.png')"

幸運のために変更するシンボル'を使う必要があります！

出典

2017-08-21 09:02:15

現在のエラーは、これまでのところ、あなたのコード

onclick="pictureChange('http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh1p8o1_500.png')"

であなたは引用符で混乱しました。外側の引用符が二重引用符の場合は、一重引用符で囲みます。

現在、1つのボタンのみです。ボタンをクリックすると、ボタンに関連付けられている画像だけが表示されます。

さらに一般的にするには、画像IDも渡します。

function pictureChange(imgid,path) { 
console.log(path); 
document.getElementById(imgid).src=path; 
}

そして、あなたは

onclick="pictureChange('theImage','http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh1p8o1_500.png')"

出典

2017-08-21 09:04:09

複数のボタンを使ってHTMLで画像を変更する

答えて

関連する問題