javascript replace content in div [closed]

Question

I have an ajax script working that fills a div on a page with search results returned from the server. Each search result has a hyper link with second javascript function that sets hidden input value on the page for posting back to the server, depending on which result is clicked on by user. All of that is working fine.

However, in the second javascript function I also want to set the contents of the original div to the selected value and I cannot get this to work.

html on starting page

<input type="text" onkeyup="getResults(this.value)"><div id="results"></div>
<input type="hidden" name="result" value="<div id='chosenresult'></div>">

markup returned by ajax:

<a href="javascript:void(0);" onclick ="setResult(1)">Result1</a><br>
<a href="javascript:void(0);" onclick ="setResult(2)">Result2</a><br>

Javascript for setResult

function setResult(varname) {
document.getElementById('chosenresult').value = varname; //WORKS FINE
document.getElementById('results').value = varname; //DOES NOT WORK
document.getElementById('results').innerHTML = varname; //ALTERNATIVE ALSO DOES NOT WORK
return false;
}

In other words, I can set the value in the hidden input field, but cannot replace the contents of the "results" div.

Thanks for any suggestions!

EDIT:

I FOUND THE MISTAKE. Putting a div in the value for the hidden input tab worked as a hack to set the value but was unecessary and seems to have broken the code so the results div was not set. In lieu of a div, simply giving an id to the hidden input tab and setting its value in javascript works as follows:

html

<div id="results"></div>
<input type="hidden" name = "result" id="chosenresult">

javascript

document.getElementById('chosenresult').value = varname; //WORKS FINE
document.getElementById('results').innerHTML = varname; //NOW WORKS 

Answer 1

First - As @Muthu Kumaran told you, please don't use "var" as a identifier.

Second - Why do you have a div inside the input value?

<input type="hidden" name="result" value="<div id='chosenresult'></div>"

If you have this markup:

<input type="text" onkeyup="getResults(this.value)">
<div id="results"></div>
<input type="hidden" name="result" value="<div id='chosenresult'></div>">

You are creating one input without id. Then you create at the same level a div called "results" and then you create another unnamed input than has a value than looks like HTML markup.

So when you do

document.getElementById('chosenresult').value = var;

You are there is no element with id "chosenresult" it must crash so no other line on this function will be executed. Anyway lets read them:

document.getElementById('results').value = var;

Divs have no property callled "value", use innerHTML instead

document.getElementById('results').innerHTML = var;

This must work, but it will modify the innerHTML of a div between both inputs, no the input's values

So if you are trying to modify the input value you must name the input itself:

<input id="results" type="text" onkeyup="getResults(this.value)">
<input id="chosenresult" type="hidden" name="result" value="">

And then modify it's "value" property:

document.getElementById('chosenresult').value = var;
document.getElementById('results').value = var;