在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.

Answer 1

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?