Jump to content

[SOLVED] How do I output data in order... Does that even make sense... It's not hard....

bobleny

By bobleny
in Javascript Help

Recommended Posts

bobleny Regular Member

bobleny

Posted
Posted

I have a question, I'm do something sort of, kind of, maybe, not really, like this:

<html>
<head>
	<script type="text/javascript">
		<!--
			function ButtonOne()
			{
				document.getElementById("foo").innerHTML = "Button One";
			}

			function ButtonTwo()
			{
				document.getElementById("foo").innerHTML = "Button Two";
			}
		-->
	</script>
</head>
<body>
	<input type='button' value='Button One' onclick="ButtonOne()">
	<input type='button' value='Button Two' onclick="ButtonTwo()">
	<br /><br />
	<div id="foo"></div>
</body>
</html>

 

 

If you press button one, the output is this:

Button One

 

If you immediately press button two, the output is this:

Button Two

 

 

 

Thats fine and all, but I want it to work like this instead.

If you press button one:

Button One

 

If you then press button two:

Button One
Button Two

 

And if you then press button one again:

Button One
Button Two
Button One

 

And so on and so forth.

 

How do I do that? I know there is a way to do it.....

phpQuestioner Regular Member

phpQuestioner

Posted
Posted

here you go - it took me a while and there my be a better way to do this, but this will work; it's not that pretty, but it's functional.

 

here it is:

 

<script type="text/javascript">
function tester(addin,content)
{
var str1 = content;
var str2 = addin;
  document.getElementById('foo').innerHTML = document.getElementById('test').value = str1.concat(str2);
  document.getElementById('btn1').onclick=function() {
  javascript:tester('<br>Button 1',document.getElementById('test').value);
}
  document.getElementById('foo').innerHTML = document.getElementById('test2').value = str1.concat(str2);
  document.getElementById('btn2').onclick=function() {
  javascript:tester('<br>Button 2',document.getElementById('test2').value)
}
}
window.onload=function() {
document.myForm.myFirstBtn.value="";
document.myForm.mySecondBtn.value="";
}
</script>

<br><br>

<form name="myForm">

<input type="button" id="btn1" value="Button 1" onclick="javascript:tester('Button 1',document.getElementById('test').value)">
<input type="button" id="btn2" value="Button 2" onclick="javascript:tester('Button 2',document.getElementById('test2').value)">


<!--Hidden Form Fields-->

<input type="hidden" name="myFirstBtn" id="test" value="Button 1">
<input type="hidden" name="mySecondBtn" id="test2" value="Button 2">

</form>

<div id="foo"></div>

roopurt18 Advanced Member

roopurt18

Posted
Posted

A subtle change in the Javascript should do it:

	<script type="text/javascript">
		<!--
			function ButtonOne()
			{
				document.getElementById("foo").innerHTML += "Button One";
			}

			function ButtonTwo()
			{
				document.getElementById("foo").innerHTML += "Button Two";
			}
		-->
	</script>

phpQuestioner Regular Member

phpQuestioner

Posted
Posted

roopurt18 code is alot cleaner then mine - your best bet is to go with his, but be sure to add your line breaks in there, too get the effect you want; like so:

 

	<script type="text/javascript">
		<!--
			function ButtonOne()
			{
				document.getElementById("foo").innerHTML += "<br>Button One";
			}

			function ButtonTwo()
			{
				document.getElementById("foo").innerHTML += "<br>Button Two";
			}
		-->
	</script>

</head>
<body>
	<input type='button' value='Button One' onclick="ButtonOne()">
	<input type='button' value='Button Two' onclick="ButtonTwo()">
	<br /><br />
	<div id="foo"></div>
</body>
</html>

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.