Changing elements in an HTML file using javascript onclick event

Question

I've been learning HTML and CSS this semester and originally started to code my project in HTML and CSS, but in order for my project to work, I had to link HTML pages to each other. It ended up making a lot of HTML pages just to change one line of text. I've been trying to get a handle on JavaScript to make my project more efficient. My HTML code looks like this:

<!doctype html>

<html>
<head>
    <meta charset=utf-8>
    <title>Oakwood</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0;">
    <link rel=stylesheet type=text/css href=default.css>

</head>
<body>

<div id=back></div>
<div id=drdick></div>
<div id=choice></div>

<div class="typewriter">
<script src="run.js"></script>
<p id=text>While out running someone says “Hi” causing you to trip. He helps you up.</p>
</div>  

<div id=move>
<button type="button" onclick="changeThis()">Next</button>
</div>  

</body>
</html>

My Javascript Looks like this:

var quoteIndex = 0;
var quotes = [
    "Thank you.",
    "Are you ok?",
    "Yes, I’m not normally this clumsy"
];
function changeQuote() {
    ++quoteIndex;
    if (quoteIndex >= quotes.length) {
        quoteIndex = 0;
    }
    document.getElementById("text").innerHTML = quotes[quoteIndex];
}


function showPic() 
{document.getElementById("drdick").src="img/drdickab.png";}

function changeThis() {
    changeQuote();
    showPic();    
}

when I test my code my quotes update how I want them to. My picture does not show up at all. Is there something I am missing when it comes to how HTML and Javascript interact? I have been looking through the forums to figure out what I have wrong, and I haven't been able to figure that out.

I changed that in my HTML file. My image is still not working — Bnyx
– Bnyx, Commented Nov 15, 2017 at 4:02
Yeah I saw that it worked anyway, just made me itchy. Your drdick div should be an <img> tag, divs don't know what to do with src attribute — IrkenInvader
– IrkenInvader, Commented Nov 15, 2017 at 4:04
okay. And because I'm not assigning an image in CSS, I need more than just the div tag. Do I just assign the <img> tag with an Id? update I went ahead and assigned an Id to my <img> tag and it worked. Thank you! — Bnyx
– Bnyx, Commented Nov 15, 2017 at 4:10

tebok · Accepted Answer · 2017-11-15 05:28:15Z

1

Your image is not displaying because you did not specify your image anywhere in your markup, and your javascript is also not enough. But try this inside your body tag:

<body>

<!--replace your button with this code.-->

<div id=move>
<button type="button" onclick="showMyImage();" value="Next"></button>
</div>  

<!--I assumed you will display the image just below your button, note that initially your image is hidden and displayed on button click event-->
<div>
<img id="myImage" src="img/drdickab.png" style="visibility:hidden"/>  
</div>
</body>

.

  <!--There's really no need to have multiple scripts, just one will do the job-->

<script type="text/javascript">
  function showMyImage(){
     document.getElementById('myImage').style.visibility="visible";
}
</script>

edited Nov 15, 2017 at 5:28

answered Nov 15, 2017 at 4:13

tebok

3901 gold badge7 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Changing elements in an HTML file using javascript onclick event

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related