Call combo box value in JavaScript

Question

How can I use the selected combo box item as a variable for the use of javascript image calling?

HTML

<select id="fileType">
 <option value=".jpg">.JPG</option>
 <option value=".png">.PNG</option>
 <option value=".gif">.GIF</option>
</select>

JavaScript

var selectedComb = document.getElementById("fileType");
var selectedFileType = selectedComb.options[selectedComb.selectedIndex];
var selectedType = selectedFileType.value;

document.write('<img src="example.com/images/pic + 'selectedType'"/>');

Now, obviously this doesn't work. How can I make it work? Its really just the document.write line that needs to be fixed.

A combobox is a UI control that is a combination (hence the name) of a drop down menu (which is what you get with a select in HTML) and a text input (an input of type text). HTML doesn't have any native controls that are represented as comboboxes. If you have one then it is constructed with a pile of JavaScript and the answer depends on that JavaScript. Alternatively, you might have meant "a select element" (which is all you have shown). Which is it? — Quentin, Sep 28 '14 at 14:06
"Now, obviously this doesn't work" — Why obviously? What behaviour do you get? What behaviour do you expect? What error messages are reported in your JavaScript console? — Quentin, Sep 28 '14 at 14:07
It *looks* like you just need to pay more attention to where you are putting your double and single quote characters. — Quentin, Sep 28 '14 at 14:07
Sorry, yes, a select element. ( I guess I called it that because in the webpage it looks like one.. or a drop down menu). Sorry for the confusion. — , Sep 28 '14 at 14:08
Quentin, obviously because ive posted here! haha. Im using Aptana IDE and it in Chrome's console it says the error is on that line. "Unexpected String". I just need to know how to make it get the selected item value and plug it into the src url so it makes a full url like "example.com/images/pic.jpg" — , Sep 28 '14 at 14:10
The first set of apostrophes are to call the line. the quotation is to call the src and then in that is another apostrophe to call the variable? — , Sep 28 '14 at 14:12
Apostrophes delimit string literals. You also have a variable with a string in it. `+` concatenates strings together. Look at where you should have string literals and where you should have string variables. — Quentin, Sep 28 '14 at 14:14
have a look here: http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice you should probably be using `document.createElement instead` — andrew, Sep 28 '14 at 14:15
that was just an example. If i were to put the url string part into a variable. and `+` them together.. it still wouldnt work. I tried it. — , Sep 28 '14 at 14:16
@andrew , i tried that, too. It didnt work because thats not the problem. The problem is binding them together into one string. — , Sep 28 '14 at 14:18
well. as @Quentin says looks like you got your concatenation operator(s) wrong the string should be `''` — andrew, Sep 28 '14 at 14:22
Ah yes, I see now. Thank you @Quentin and andrew for pointing it out. — , Sep 28 '14 at 14:25
[this](http://stackoverflow.com/a/25398255/2333214) might help. — T J, Sep 28 '14 at 14:27

score 1 · Accepted Answer · edited May 23 '17 at 12:05

You should be using document.write() to insert content on the fly while document is being loaded.

According to MDN's doc:

Writing to a document that has already loaded without calling document.open() will automatically perform a document.open() call

And from document.open():

If a document exists in the target, this method clears it

So, Using document.write() after the document is loaded will overwrite (or clear) your document. For such reasons, using document.write() is considered a bad practice.

Using

document.body.innerHTML+= '<img src="example.com/images/pic' +selectedType+ '"/>';

instead will fix the issue.

See also What are alternatives to document.write?

Call combo box value in JavaScript

1 Answers1