3 Replies - 681 Views - Last Post: 08 May 2012 - 06:37 PM

#1 monstratonis  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 63
  • Joined: 18-April 10

can these be changed to add more text on each button click?

Posted 08 May 2012 - 05:31 AM

hi :)

building some shopping cart script and stuck here with displaying in a DIV that item has been addedd...

here is code and what I am trying to achieve is that on every button click another line that says TOMATO ADDED becomes visible so if you click 3 times 3 TOMATO ADDED lines is displayed .... so far I only managed to show/hide it ...

<script language="javascript"> 
function toggle() {
	var ele = document.getElementById("toggleText");
	var text = document.getElementById("displayText");
	if(ele.style.display == "block") {
    		ele.style.display = "none";
		text.innerHTML = "show";
  	}
	else {
		ele.style.display = "block";
		text.innerHTML = "hide";
	}
} 
</script>
 
<a id="displayText" href="javascript:toggle();">add</a> 
check your cart: <FORM  ACTION="javascript:toggle();" >
		<input type="image" src="./images/buynow.gif" border=0  align=top>
<div id="toggleText" style="display: none">TOMATO added </div>
<div id="toggleText" style="display: none">TOMATO added </div>
<div id="toggleText" style="display: none">TOMATO added </div>


Is This A Good Question/Topic? 0
  • +

Replies To: can these be changed to add more text on each button click?

#2 jon.kiparsky  Icon User is offline

  • Pancakes!
  • member icon


Reputation: 7294
  • View blog
  • Posts: 12,134
  • Joined: 19-March 11

Re: can these be changed to add more text on each button click?

Posted 08 May 2012 - 05:51 AM

"Toggle" means "switch between on and off". To do this you would probably want to edit the text in the div, either changing what's there or recalculating the display from some backing representation.
Or, conceivably, you could generate a new div with the content you want and add it to the DOM.
I'm pretty much a javascript novice, myself, so I don't know what's the most idiomatic approach, but showing and hiding isn't going to do what you want.
Was This Post Helpful? 0
  • +
  • -

#3 monstratonis  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 63
  • Joined: 18-April 10

Re: can these be changed to add more text on each button click?

Posted 08 May 2012 - 06:52 AM

hi Jon,

i changed that to message box saying that your item has been added and its ok for now ...

i was thinking about adding an images of tomato on each click but that would be way too much scripting and i running out of time so....

thanks!
Was This Post Helpful? 0
  • +
  • -

#4 JMRKER  Icon User is online

  • D.I.C Addict

Reputation: 125
  • View blog
  • Posts: 818
  • Joined: 25-October 08

Re: can these be changed to add more text on each button click?

Posted 08 May 2012 - 06:36 PM

View Postmonstratonis, on 08 May 2012 - 07:52 AM, said:

...
i changed that to message box saying that your item has been added and its ok for now ...

i was thinking about adding an images of tomato on each click but that would be way too much scripting and i running out of time so....
...


See if you can use any of this...
<!DOCTYPE html>
<html>
<head>
<title>Add / Remove Element</title>
<script type="text/javascript">
// For: http://www.dreamincode.net/forums/topic/278526-can-these-be-changed-to-add-more-text-on-each-button-click/

this_num = 1;
function addDivElement(elem) {
  var $top = document.getElementById(elem);
  var newId = document.createElement('div');
  var id = 'myElem'+this_num;
  newId.setAttribute('id', id );
  var str = "<a href='' onclick='removeThis(this);return false'>";
  str += "Remove: "+id+"</a>";
  newId.innerHTML = str;
  $top.appendChild(newId);
  this_num++;
}
function addImgElement(elem) {
  var $top = document.getElementById(elem);
  var newId = document.createElement('img');
  var id = 'myElem'+this_num;
  newId.setAttribute('id', id );
  newId.setAttribute('src','http://www.nova.edu/hpd/otm/pics/4fun/11.jpg'); 

// removal logic does not work yet
//  var str = "<br><a href='' onclick='removeThis(this);return false'>";
//  str += "Remove: "+id+"</a>";
//  newId.innerHTML = str;
  $top.appendChild(newId);
  this_num++;
}
function removeThis(obj){
  var el = obj.parentNode;
  el.parentNode.removeChild(el);
}
</script>
</head>
<body>
<input type="button" name="button" value="Add DIV Element" onclick="addDivElement('top')" />
<input type="button" name="button" value="Add IMG Element" onclick="addImgElement('top')" />
<div id="top"></div>
</body>
</html>


Was This Post Helpful? 0
  • +
  • -

Page 1 of 1