Menu
I'm building a page for a company I'm interning for, and can't seem to figure this one out. The code you see below is just a simplified template, so that I don't give any information about the company away (and all the style attributes are in a separate document, so everything in the code is alright.
What I'm having a problem with is making multiple onClick events work. For that matter, is using the onClicks in the comment tags even feasible? I want the text that says Further Instruction to have it's href path changed depending on the animal picture that's clicked.
Also, I can't use any JavaScript, so please don't suggest the use of any. Happen to have any ideas?
<div id="container">
<div class="mainPicture">
<img alt="" id="awesome" name="Awesome2" src="awesome.png" />
</div>
<div id="gallery">
<ul class="popOut">
<li>
<a href="DogText.html" target="AnimalInfo" onClick="document.Awesome2.src='dog.jpg'"> <!--onClick="document.furtherInstructions.href='DogText.html'">-->
<img src="dog.jpg" alt="dog"><img src="dog.jpg" alt="dog" class="preview">
</a>
</li>
<li>
<a href="CatText.html" target="AnimalInfo" onClick="document.Awesome2.src='cat.jpg'"> <!--onClick="document.furtherInstructions.href='CatText.html'">-->
<img src="cat.jpg" alt="cat"><img src="cat.jpg" alt="cat" class="preview">
</a>
</li>
<li>
<a href="ParrotText.html" target="AnimalInfo" onClick="document.Awesome2.src='parrot.jpg'"> <!--onClick="document.furtherInstructions.href='ParrotText.html'">-->
<img src="parrot.jpg" alt="parrot"><img src="parrot.jpg" alt="parrot" class="preview">
</a>
</li>
<li>
<a href="LizardText.html" target="AnimalInfo" onClick="document.Awesome2.src='lizard.jpg'"> <!--onClick="document.furtherInstructions.href='LizardText.html'">-->
<img src="lizard.jpg" alt="lizard"><img src="lizard.jpg" alt="lizard" class="preview">
</a>
</li>
<li>
<a href="HorseText.html" target="AnimalInfo" onClick="document.Awesome2.src='horse.jpg'"> <!--onClick="document.furtherInstructions.href='HorseText.html'">-->
<img src="horse.jpg" alt="horse"><img src="horse.jpg" alt="horse" class="preview">
</a>
</li>
<li>
<a href="ChickenText.html" target="AnimalInfo" onClick="document.Awesome2.src='chicken.jpg'"> <!--onClick="document.furtherInstructions.href='ChickenText.html'">-->
<img src="chicken.jpg" alt="chicken"><img src="chicken.jpg" alt="chicken" class="preview">
</a>
</li>
<li>
<a href="DefaultText.html" target="AnimalInfo" class="center" onClick="document.Awesome2.src='awesome.png'"> <!--onClick="document.furtherInstructions.href='DefaultText.html'">-->
<p>Default Image</p>
</a>
</li>
</ul>
<div id="rightcol">
<iframe src="DefaultText.html" title="Information About Animals" name="AnimalInfo" class="fixThisHeight">
</iframe>
</div>
<div id="externalInstructions">
<a href="DefaultText.html" name="furtherInstructions">
<p>Further Instructions</p>
</a>
</div>
</div>
</div>
448
So the answer is - yes you can :) However, I'd recommend to use unobtrusive JavaScript.. mixing js with HTML is just nasty.
Greetings! Yes, you can call two JS Function on one onClick. Use semicolon (';') between both the functions.
The first solution to perform multiple onClick events in React is to include all of your actions inside of a function and then call that single function from the onClick event handler. Let's explore how to do that in a React Component: import React from 'react'; function App() { function greeting() { console.
If you want to call a function when the onclick event happens, you'll just want the function name plus the parameters. Then if your parameters are a variable (which they look like they are), then you won't want quotes around them.
Just separate your commands with a semi-colon:
onClick="document.Awesome2.src='chicken.jpg'; document.furtherInstructions.href='ChickenText.html';">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
