HTML Units Aren't Displaying-CodePudding

This JSFiddle is the behavior I want: https://jsfiddle.net/nstruth/t0dopzav/1/

The HTML is displaying when I select Volvo, but the JavaScript isn't running. I looked at other innerHTML JavaScript questions, but I'm confused. As you can see in this JSFiddle the units aren't populating but I can enter numbers in the input fields.

https://jsfiddle.net/nstruth/ph3czotf/4/

HTML:

<!DOCTYPE html>
<html>
<head>
<script   src="https://code.jquery.com/jquery-3.6.0.min.js"   integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="   crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="STYLE.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script> // In your Javascript (external .js resource or <script> tag)
$(document).ready(function() {
    $("#cars2").select2();
});
</script>

<style>..
select {
width: 150px;

}
</style>
</head>
<body>
<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>
function myFunction(event){
 var x = document.getElementById("myDIV");
 //here you are picking the selected option item
 var y = $('#cars2 :selected').val();
 switch (y) {
  case '1':
    x.innerHTML = `<p>From:</p>
  <select style="float:left" id="MetricAndImperialLength1"  oninput="Run1()" onchange="Run1()">
    </select>



  <input style="height:50%;font-size:15pt;width:1000px; border: 1px solid #000;" id="Input1" type="number" oninput="Run1()" onchange="Run1()">

  <p>To:</p>

  <select style="float:left" id="MetricAndImperialLength2"  oninput="Run2()" onchange="Run2()">   
  </select>

  <input style="height:50%;font-size:15pt;width:1000px; border: 1px solid #000;" id="Input2" type="number" oninput="Run2()" onchange="Run2()" />`;

$(".js-example-basic-single").select2();
    break;
  case '2':
    x.innerHTML = "<p>Roy!</p>";
  }
}
</script>
<script src="mathandstuff.js"></script>
</body>
</html>

JavaScript:

//Distance Math

var units = [
  ['Inches', 0.025400000000000],
  ['Feet', 0.30480000000000000],
  ['Furlongs', 201.168],
  ['Meters', 1.00]
];
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 Run1() {
      var SpecialValue = document.getElementById("Input1").value * document.getElementById("MetricAndImperialLength1").value / document.getElementById("MetricAndImperialLength2").value;
      document.getElementById("Input2").value = SpecialValue.toFixed(12);
       
    }

    function Run2() {
      var SpecialValue = document.getElementById("Input2").value * document.getElementById("MetricAndImperialLength2").value / document.getElementById("MetricAndImperialLength1").value;
      document.getElementById("Input1").value = SpecialValue.toFixed(12);
    }

Please help a noob out.

Thanks

CodePudding user response：

You're mixing and matching functions from standard JavaScript (like getElementById) with functions from JQuery. It's generally going to be better to stick to one framework as much as possible. Otherwise you end up with disorganized code. As @Barmar suggests you should separate your HTML and code as much as possible (again, because it's disorganized and hard to read).

You might try something like this:

$(function() {
  $('#cars2').on('change', function(event) {
    $('#myDIV').html($(`.placeholders div:nth-child(${$(this).val()})`).html());
  })
  $('select.run1').on('change', Run1)
  $('input.run1').on('input', Run1)
  $('input.run1').on('change', Run1)
  $('select.run2').on('change', Run2)
  $('input.run2').on('input', Run2)
  $('input.run2').on('change', Run2)
});

function Run1() {
 // omitted for clarity
}

function Run2() {
 // omitted for clarity
}

.js-example-basic-single {
  float: left
 }
 
.runInput {
   height:50%;
   font-size:15pt;
   width:1000px;
   border: 1px solid #000;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myDIV"><p>Hello</p></div>

<label for="cars">Choose a car:</label>
<select id="cars2">
<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>

<div  style="display:none">
  <div>
    <p>From:</p>
    <select >
    </select>
    <input  type="number">
    <p>To:</p>
    <select >   
    </select>
    <input  type="number"/>
  </div>
  <div><p>Roy!</p></div>
<div>

CodePudding user response：

Consider the following.

https://jsfiddle.net/Twisty/8t7qn6Lc/

JavaScript

$(function() {
  var units = {
    Inches: 0.0254,
    Feet: 0.3048,
    Furlongs: 201.168,
    Meters: 1
  };
  var selectors = $('.newClass1');

  function Run1() {
    var self = parseFloat($("#Input1").val());
    var SpecialValue = self * units[$("#MetricAndImperialLength1").val()] / units[$("#MetricAndImperialLength2").val()];
    $("#Input1").val(self.toFixed(12));
    $("#Input2").val(SpecialValue.toFixed(12));
  }

  function Run2() {
    var self = parseFloat($("#Input2").val());
    var SpecialValue = self * units[$("#MetricAndImperialLength2").val()] / units[$("#MetricAndImperialLength1").val()];
    $("#Input2").val(self.toFixed(12));
    $("#Input1").val(SpecialValue.toFixed(12));
  }

  function myFunction(event) {
    var x = $("#myDIV");
    x.html("");
    var y = $('#cars2').val();
    console.log(y);
    switch (y) {
      case '1':
        $("<p>").html("From:").appendTo(x);
        x.append($("#temp1").html());
        $("select:last", x).attr("id", "MetricAndImperialLength1");
        $("input:last", x).attr("id", "Input1").val("1.000000000000");
        $("select:last, input:last", x).on("input change", Run1);
        $("<p>").html("To:").appendTo(x);
        x.append($("#temp1").html());
        $("select:last", x).attr("id", "MetricAndImperialLength2");
        $("input:last", x).attr("id", "Input2").val("0.025400000000");
        $("select:last option:last", x).prop("selected", true);
        $("select:last, input:last", x).on("input change", Run2);
    }
  }

  $("#cars2").change(myFunction).Select2();
});

This has been switched over to jQuery for all parts. When "Volvo" is selected, new content is added and bound to Run1 and Run2 respectively.

Switching to an Object can help will your calculations. Now you can use the Value of each drop down as the Index for the Object when performing calculations.

Input type, even as Number, will always return a String. To ensure proper calculations, it is best to cast it as the proper Float.