/    Sign up×
Community /Pin to ProfileBookmark

writing to a <p id> using onclick

Copy linkTweet thisAlerts:
Dec 11.2008

Hi, I was wondering if anyone could help me with this.

I have a set of 20 images on my html page, each one is the name of a C0cktail shot. Each one has an onclick, which calls the following function, which adds the name of that shot to a <p id> so for example if I click once on a vodka bottle it will then add the text ‘1 Vodka’ to the <p id> if I click on the same image twice it will just add the same text again. Would it be possible to click on an image more than once then have the text ‘1 Vodka’ to change to 2 Vodka)?

My JS Code

_________________________________________________________________

function addIngredient(ingredient)

{
if(document.getElementById (‘cTailShaker’).innerHTML.length==0){
document.getElementById (‘cTailShaker’).innerHTML=ingredient;
}else{
document.getElementById (‘cTailShaker’).innerHTML=(document.getElementById (‘cTailShaker’).innerHTML)+”<br />1 ” +ingredient;
}
}

_________________________________________________________________

to post a comment
JavaScript

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@mikemDec 11.2008 — Hi,

This may help...
[code=html]<img width="100" height="100" src="vodka.jpg" onclick="addIngredient('Vodka')">
<img width="100" height="100" src="gin.jpg" onclick="addIngredient('Gin')">
<img width="100" height="100" src="scotch.jpg" onclick="addIngredient('Scotch')">

<div id="cTailShaker" style="width:100px; height:100px;" > </div>

<div id="resetButton" style="width:100px;border:1px solid red" onclick="wipe()" >Reset</div>[/code]

[CODE]var vNum=0, gNum=0, sNum=0;

function addIngredient(ingredient)
{
switch(ingredient)
{
case "Vodka" : vNum++; break;
case "Gin" : gNum++ ; break;
case "Scotch" : sNum++; break;
}

var mix="";

if(vNum > 0) { mix += vNum + " Vodka<br>"; }
if(gNum > 0) { mix += gNum + " Gin<br>"; }
if(sNum > 0) { mix += sNum + " Scotch<br>"; }

document.getElementById("cTailShaker").innerHTML=mix;
}

function wipe()
{
vNum=0; gNum=0; sNum=0;
document.getElementById("cTailShaker").innerHTML="";
}[/CODE]
Mike
×

Success!

Help @tsmith89 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...