使用多個按鈕更改HTML中的圖片

我將要有5個圖像和5個按鈕，目前只有單個按鈕。點擊按鈕時，我只想顯示與該按鈕關聯的圖像。爲此我想寫一個函數來獲取圖像路徑作爲參數。我是很新的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在0索引將被分配，否則你會卡住的錯誤。

更新片段：css 顯示：in-block-屬性將幫助你。你也需要改變圖像的寬度，因爲默認情況下它

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

檢查更新片段 –

嘿chauhan，謝謝，但上次剪斷沒有很好地工作。我想保留圖片的原始尺寸，只需將圖片旁邊的按鈕放在右上角。 – 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

ü錯使用符號"。裏面onclick函數pictureChange你有符號"然後html拋出語法錯誤。

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')"

你糊塗了帖。如果您的外部引號是雙引號，請用單引號包裝。

目前只有單個按鈕。點擊按鈕時，我只想顯示與按鈕關聯的圖像。

只是爲了使它更通用，傳遞圖像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中的圖片

回答

相關問題