I'm encountering an issue with my code that inserts icons into a div with the ID of "editor". When I try to add a <select> element to the div with the ID of "drug_tool", the CSS styling rules for it are being ignored. How can I resolve this problem?
Here's the code I have written:
<div id="editor"></div>
<script>
var ni = document.getElementById('editor');
var newdiv = document.createElement('div');
var divIdName = 'glavni';
newdiv.setAttribute('id',divIdName);
ni.appendChild(newdiv);
var ni = document.getElementById('glavni');
var newdiv = document.createElement('div');
var divIdName = 'toolbar';
newdiv.setAttribute('id',divIdName);
ni.appendChild(newdiv);
var ni = document.getElementById('toolbar');
var newdiv = document.createElement('div');
var divIdName = 'prvi_tool';
newdiv.setAttribute('id',divIdName);
newdiv.innerHTML =
'<img src="images_zadaca/cut.png" onclick="" style="cursor:pointer;"> \
<img src="images_zadaca/copy.png" onclick="removeElement(\'bold\')" style="cursor:pointer;"> \
<img src="images_zadaca/paste.png" onclick="removeElement(\'bold\')" style="cursor:pointer;"> \
<img src="images_zadaca/redo.png" onclick="izmijeni(\'redo\')" style="cursor:pointer;"> \
<img src="images_zadaca/undo.png" onclick="izmijeni(\'undo\')" style="cursor:pointer;"> \
<img src="images_zadaca/bold.png" onclick="izmijeni(\'bold\')" style="cursor:pointer;"> \
<img src="images_zadaca/italic.png" onclick="izmijeni(\'italic\')" style="cursor:pointer;"> \
<img src="images_zadaca/underline.png" onclick="izmijeni(\'underline\')" style="cursor:pointer;"> \
<img src="images_zadaca/align_center.png" onclick="izmijeni(\'justifyCenter\')" style="cursor:pointer;"> \
<img src="images_zadaca/align_justify.png" onclick="izmijeni(\'justifyFull\')" style="cursor:pointer;"> \
<img src="images_zadaca/align_left.png" onclick="izmijeni(\'justifyLeft\')" style="cursor:pointer;"> \
<img src="images_zadaca/align_right.png" onclick="izmijeni(\'justifyRight\')" style="cursor:pointer;">';
ni.appendChild(newdiv);
var ni = document.getElementById('toolbar');
var newdiv = document.createElement('div');
var divIdName = 'drugi_tool';
newdiv.setAttribute('id',divIdName);
newdiv.innerHTML =
' \
<select id="select2" onchange="bojaFonta()"> \
<option value="red">Red</option> \
<option value="blue">Blue</option> \
<option value="green">Green</option> \
<option value="black">Black</option> \
<option value="white">White</option> \
</select> \
<img src="images_zadaca/copy.png" onclick="removeElement(\'bold\')" style="cursor:pointer;"> \
<img src="images_zadaca/paste.png" onclick="removeElement(\'bold\')" style="cursor:pointer;"> \
<img src="images_zadaca/redo.png" onclick="izmijeni(\'redo\')" style="cursor:pointer;"> \
<img src="images_zadaca/undo.png" onclick="izmijeni(\'undo\')" style="cursor:pointer;"> \
<img src="images_zadaca/bold.png" onclick="izmijeni(\'bold\')" style="cursor:pointer;"> \
<img src="images_zadaca/italic.png" onclick="izmijeni(\'italic\')" style="cursor:pointer;"> \
<img src="images_zadaca/underline.png" onclick="izmijeni(\'underline\')" style="cursor:pointer;"> \
<img src="images_zadaca/align_center.png" onclick="izmijeni(\'justifyCenter\')" style="cursor:pointer;"> \
<img src="images_zadaca/align_justify.png" onclick="izmijeni(\'justifyFull\')" style="cursor:pointer;"> \
<img src="images_zadaca/align_left.png" onclick="izmijeni(\'justifyLeft\')" style="cursor:pointer;"> \
<img src="images_zadaca/align_right.png" onclick="izmijeni(\'justifyRight\')" style="cursor:pointer;">';
ni.appendChild(newdiv);
</script>