Loading file content

[Ustag]

hi I got this script from this websit but I wanted to remake it so that I have 4 buttons that will print 4 different things.first in header:

<script type="text/javascript">function loadXMLDoc(){var xmlhttp;if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest();  }else  {// code for IE6, IE5  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }xmlhttp.onreadystatechange=function()  {  if (xmlhttp.readyState==4 && xmlhttp.status==200)	{	document.getElementById("add").innerHTML=xmlhttp.responseText;	}  }if (aa=1) { xmlhttp.open("GET","1.txt",true); }if (aa=2) { xmlhttp.open("GET","2.txt",true); }if (aa=3) { xmlhttp.open("GET","3.txt",true); }if (aa=4) { xmlhttp.open("GET","4.txt",true); }xmlhttp.send();}</script>

then the buttons:

<button type="button" id="aa" value="1" onclick="loadXMLDoc()">1</button><button type="button" id="aa" value="2" onclick="loadXMLDoc()">2</button><button type="button" id="aa" value="3" onclick="loadXMLDoc()">3</button><button type="button" id="aa" value="4" onclick="loadXMLDoc()">4</button><div id="add"><h2>Pick a number!</h2></div>

But I always only get file 4.txt to show. How come? I tried put "else if" on 2 3 4 but it dont work eather then only 1.txt show.

[Synook]

You need to use == for comparison.

[Ingolme]

There's a lot wrong with this.

1. You can't have more than one element on the page with the same id.
2. The variable "aa" is undefined.
3. The loadXMLDoc() function doesn't have any idea which button was pressed.

[Ustag]

if I put == it dont work at allwhy can't I use same id on more then one button?maybe loadXMLDoc() dont know and thats why im using IF, is it wrong?

[justsomeguy]

if I put == it dont work at all

That's because the variable aa is not defined anywhere. It does not equal 1, 2, 3, or 4, so none of the if statements match.

why can't I use same id on more then one button?

Because then there's no way to distinguish between them. If you use document.getElementById('aa'), which of those 4 elements is it going to return?It would make more sense to pass the filename you want to load to the function:onclick="loadXMLDoc('1.txt')"Then the function has the filename to load and you don't need to try and figure that out yourself.

[Ustag]

Thanks I get it now, here is my solution if someone else wanna see:

<script type="text/javascript">function loadXMLDoc(a){var xmlhttp;if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest();  }else  {// code for IE6, IE5  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }xmlhttp.onreadystatechange=function()  {  if (xmlhttp.readyState==4 && xmlhttp.status==200)	{	document.getElementById("add").innerHTML=xmlhttp.responseText;	}  }xmlhttp.open("GET",a,true);xmlhttp.send();}</script>

<button type="button" name="B1" onclick="loadXMLDoc('1.txt')">1</button><button type="button" name="B2" onclick="loadXMLDoc('2.txt')">2</button><button type="button" name="B3" onclick="loadXMLDoc('3.txt')">3</button><button type="button" name="B4" onclick="loadXMLDoc('4.txt')">4</button>

Added variable: function loadXMLDoc(a)Added the variable to this instead of filename: xmlhttp.open("GET",a,true);Defined the filename to this variable in the button: onclick="loadXMLDoc('1.txt')"