Looking to achieve this outcome: https://jsfiddle.net/nstruth/t0dopzav/1/
The issue I'm facing is that the HTML appears correctly when Volvo is selected, but the JavaScript is not functioning as expected. Despite reviewing similar innerHTML JavaScript queries, I still find it confusing. Here's a JSFiddle where the units aren't populating as intended: https://jsfiddle.net/nstruth/ksgwaqc8/8/
// Your Javascript code here
$(document).ready(function() {
$("#cars2").select2();
});
//Distance Math
var units = [
['Inches', 0.025400000000000],
['Feet', 0.30480000000000000],
['Furlongs', 201.168]
];
var selectors = document.querySelectorAll('.newClass1');
for (var i = 0; i < units.length; i++) {
for (var j = 0; j < selectors.length; j++) {
var option = document.createElement('option');
option.value = units[i][1];
option.textContent = units[i][0];
selectors[j].add(option);
}
}
function calcLength1() {
var SpecialValue = document.getElementById("lengthInput1").value * document.getElementById("lengthCalc1").value / document.getElementById("lengthCalc2").value;
document.getElementById("lengthInput2").value = SpecialValue.toFixed(12);
}
function calcLength2() {
var SpecialValue = document.getElementById("lengthInput2").value * document.getElementById("lengthCalc2").value / document.getElementById("lengthCalc1").value;
document.getElementById("lengthInput1").value = SpecialValue.toFixed(12);
}
function myFunction(event) {
var x = document.getElementById("myDIV");
// Selecting an option
var y = $('select#cars2 option:selected').val();
switch (y) {
case '1':
x.innerHTML = `<p>From:</p>
<select style="float:left" id="lengthCalc1" class="js-example-basic-single select2-container newClass1" oninput="calcLength1()" onchange="calcLength1()">
</select>
<input style="height:50%;font-size:15pt;width:1000px; border: 1px solid #000;" id="lengthInput1" type="number" oninput="calcLength1()" onchange="calcLength1()" />
<p>To:</p>
<select style="float:left" id="lengthCalc2" class="js-example-basic-single select2-container newClass1" oninput="calcLength2()" onchange="calcLength2()">
</select>
<input style="height:50%;font-size:15pt;width:1000px; border: 1px solid #000;" id="lengthInput2" type="number" oninput="calcLength2()" onchange="calcLength2()" />`;
$(".js-example-basic-single").select2();
break;
case '2':
x.innerHTML = "<p>Roy!</p>";
}
}select {
width: 150px;
}
.select2-selection--single {
height: 100px !important
}
/* Other CSS rules go here */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="89faece5eceafdbbc9bda7b8a7b9a4fbeaa7b9">[email protected]</a>/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c7b4a2aba2a4b3f587f3e9f6e9f7eab5a4e9f7">[email protected]</a>/dist/css/select2.min.css" rel="stylesheet" />
<div id="myDIV">
<p>Hello</p>
</div>
<label for="cars">Choose a car:</label>
<select id="cars2" onchange="myFunction()">
<option value="0">Pick something</option>
<option value="1">Volvo</option>
<option value="2">Saab</option>
<option value="3">Opel</option>
<option value="4">Audi</option>
</select>
<script>
/* Additional scripts can be added here */
</script>