All geek questions in one place

Change image in HTML with a few buttons

I will have 5 images and 5 buttons, currently only one button. When I click a button, I want to show only the image associated with the button. for this, I would like to write one function that receives the image path as a parameter. I am very new to JavaScript, Bellow is the code I found and edited a bit:

<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>
+4
source share
4 answers

You are currently entering the code, when you pass a string to a function, you need to execute a sequence of inverted commas. for example, when using ", you can use only one" inverted comma "inside it.

<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>
Run codeHide result

5 , . , , , .. .

, src src , . , , , src 0, , .

: css display: inlne-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>
Hide result
+6

, " , char, " ",

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>
Hide result
+2

". onclick pictureChange u ", html throw.

u ' "

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

!

+1

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

. , .

. , .

To make it more universal, skip the image id.

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

And you can use it as

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

Source: https://habr.com/ru/post/1684107/

More articles:


All Articles