Changing the inner html with javascript
Question
I have this divs in my html
<img src="images/cocina1.jpg" name = "main_img" alt="alternate_text" height="250" width="150" />
<div class="imgbox" id="thumbnail_1"> <a href="#" onclick="changeTo1()"><img src="images/cocina1.jpg" alt="alternate_text" height="250" width="150" /> </a> <br />
<p>Medico1</p>
</div>
and the following JS
function changeTo1(){
var newP = "some Paragraph"
document.getElementById('id_descripcion_txt').innerHTML = newP;
document.main_pic.src = "images/medico1.jpg"
document.getElementById('thumbnail_1').innerHTML = " <a href=\"medicos/medico0.html\"><img src=\"images/cocina0.jpg\" alt=\"alternate_text\" height=%22250%22 width=\"150\" /> </a> <br /> <p>Medico0</p> "
}
Now, after clicking on the image that calls changeTo1(), the first part of the JS works: the 'id_descripcion_txt' does changes its innerHTML to "some Paragraph", but the other 2 statements, of changing main_pic src and the "thumbnail_1" innerHTML to something else don't work.
Any ideas? Thanks
4 answers
solution1
0 2012-10-10 07:39:25
If you want to change the one of your image through java script, then use this code, here in this example i have a banner and a text, when i click on the button then banner and text both changed.
<html>
<head>
<script type="text/javascript">
function changeImgandText()
{
if(document.getElementById('banner'))
banner.innerHTML = '<img src="img1.jpg"width="100%" height=220>';
demo.innerHTML="Pir you are great !";
}
</script>
<p id='banner'><img src="img2.jpg" width="100%" height=220> </p>
<b id='demo'>dude</b> </br>
<input type='button' onclick='changeImgandText()' value='Change Text'/>
</head>
</html>
solution2
0 2011-08-12 05:19:59
It's probably failing on the image change. I think you want this HTML (note marked change):
<img src="images/cocina1.jpg" id="main_img" alt="alternate_text" height="250" width="150" />
^^^^^^^^^^^^^
And this JS:
document.getElementById("main_img").src = ...
Also, you had different terms for the image ('main_pic' in one, and 'main_img' in the other).
solution3
0 2011-08-12 05:21:03
Are you getting a javascript error? Unless there's a typo in your posted code,
document.main_pic
does not exist. Try
document.main_img.src = "images/medico1.jpg";
solution4
0 ACCPTED 2011-08-12 05:41:49
changing main_pic src and the "thumbnail_1" innerHTML to something else don't work.
On making the changes,
document.main_img.src = "images/medico1.jpg";
and
height=\"350\" instead of height=%22250%22
it worked for me.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.