Question

I’ve been tasked with building a very simple app that that has a series of dropdowns in rows of 2, when 2 are selected, a simple functions concatenates the 2 values and gives an output next to them like so:

dropdown1 dropdown2 Output

What I’m trying to get is, once the second dropdown value is chosen the function runs and displays the output where it says output. But currently, what seems to happens is the output is displayed in a new window.

Here’s what I have so far (HTML):

<form>
<select id="test">
<option>Arena/Quantum Barcelona LTBC</option>
<option>Arena/Quantum Spain LTES</option>
</select>

<select id="name" onchange="tryThis()">
<option>Name</option>
<option>Name1</option>
</select>

</form>

JavaScript:

function tryThis() {

var string, string1 = '';

var e = document.getElementById("test");
string = e.options[e.selectedIndex].text;

var a = document.getElementById("name");
string1 = a.options[a.selectedIndex].text;
document.write(string+'_'+string1);
}

Am I making this more difficult than it needs to be?!

Answer 1

That’s because document.write clears the page before displaying something. You should never need to use that function.

Instead, you could append it to e.g. the body:

document.body.appendChild(
    document.createTextNode(string + '_' + string2)
);