The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> HTML with Javascript button help!, Help creating button with image and text
chelsearussell
post Sep 23 2017, 04:27 PM
Post #1





Group: Members
Posts: 1
Joined: 23-September 17
Member No.: 26,504



Hello! I am in a beginner programming class. We are only on chapter 4, so please keep that in mind. This class is using HTML with some javascript, we haven't really gotten too deep into javascript yet. My project for this week is to create two buttons, and when each one of these buttons are clicked a photo and a paragraph comes up. I have the button with the paragraph coming up but I can't figure out how to add the image. Everything I have found on the internet is super javascript, stuff I haven't learned. Here is my code, I just picked a random topic, haha

<!doctype html>
<!--Web page that displays quotes at the click of a button click. -->
<!--============================================================= -->
<html>
<head>
<title>Project2</title>
</head>
<body>
<div style="text-align:center">
<p>
<h2> <span style="color:red">Favorite Animals</span> </h2>
</p>


<input type="button" value="Slow Loris"
onmouseover="this.style.backgroundColor='red';"
onmouseout="this.style.backgroundColor='white';"
onclick="document.getElementById('outputDiv').innerHTML=
'This animal might look like a harmless, big-eyed baby ewok, but ' +
'the slow loris is one of the only venomous mammals in the world. ' +
'Its subtle nature makes it popular in the illegal pet trade, but this ' +
'furry creature also carries a toxin that is released from the brachial ' +
'gland on the sides of its elbows. If threatened, the loris can take ' +
'the toxin into its mouth and mix it with saliva. The animal may also ' +
'lick or rub its hair with this mixture to deter predators from attack. ' +
'The toxin can cause death by anaphylactic shock in some people.';">

<input type="button" value="Sloth"
onmouseover="this.style.backgroundColor='red';"
onmouseout="this.style.backgroundColor='white';"
onclick="document.getElementById('outputDiv').innerHTML=
'Sloths—the sluggish tree-dwellers of Central and South America—spend ' +
'their lives in the tropical rain forests. They move through the canopy ' +
'at a rate of about 40 yards per day, munching on leaves, twigs and buds. ' +
'Sloths have an exceptionally low metabolic rate and spend 15 to 20 hours ' +
'per day sleeping. And surprisingly enough, the long-armed animals are ' +
'excellent swimmers. They occasionally drop from their treetop perches ' +
'into water for a paddle.';">
</div>
<div id="outputDiv"></div>
</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 23 2017, 06:22 PM
Post #2


.
********

Group: WDG Moderators
Posts: 7,736
Joined: 10-August 06
Member No.: 7



Hello! smile.gif

QUOTE(chelsearussell @ Sep 23 2017, 11:27 PM) *

I have the button with the paragraph coming up but I can't figure out how to add the image.

You can just put the HTML for the IMG element along with the innerHTML text.

That said, using innerHTML means that nothing will show up if JS is unavailable. A more robust solution might be to create the two content sections as real static HTML. Then generate the buttons and hide both sections with javascript when the page is loaded, and unhide the sections when a button is clicked. Hopefully you'll learn something that in a later class, though I don't have much hope for today's JS-dependent web. mellow.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 13th December 2017 - 12:39 AM