innerHTML isn't passing to JavaScript

I am new to JavaScript and pretty much all programming. I am attempting to make a web application and I can not seem to get innerHTML to pass to my JavaScript code. What am I doing wrong?

<head>
  <title>Injector Calculator
  </title>
</head>
<body type = "text/HTML/CSS">
  <p> Please enter your desired horse power!</p>
  Desired Horsepower: <input type ="text" id="desiredHp"></input>
  Which Engine: 
  <select id="engineType" type = "text" value="value">
    <option>G60T</option>
    <option>2.0 8v</option>
    <option>MK2 16v</option>
    <option>12V VR6</option>
    <option>24V VR6</option>
    <option>R32</option>
    <option>B5 S4</option>
  </select>
  <button id= "button1" onclick="computeCC();">Find my Injectors!</button>
  <p id = "output">ccs</p>
  <p id ="output2"></p>
  <script type = "text/javascript"> 
    function computeCC()
    {
        var hp = parseInt(document.getElementById("desiredHp").value);
        var eT = document.getElementById("engineType").value;
        document.getElementById("output").innerHTML = hp;
        document.getElementById("output2").innerHTML = eT;
    }
  </script>
</body>
</html>

3 answers

  • answered 2017-11-12 20:35 Milan Pantelic

    Your code needs little remake, you have a minor issues with syntax. select tag can't have 'value' attribute because his value is value of selected option tag and you don't need 'type' attribute for select. The input tag does not have closing tag. Your JS function fails when I enter some text that is not a number inside input tag. Here is some upgrade of your code, change something if is necessary .

    <p> Please enter your desired horse power!</p>
    Desired Horsepower: <input type ="text" id="desiredHp"/>
    Which Engine: <select id="engineType">
        <option value='G60T'>G60T</option>
        <option value='2.0 8v'>2.0 8v</option>
        <option value='MK2 16v'>MK2 16v</option>
        <option value='12V VR6'>12V VR6</option>
        <option value='24V VR6'>24V VR6</option>
        <option value='R32'>R32</option>
        <option value='B5 S'>B5 S4</option>
    </select>
    <button id="button1" onclick="computeCC();">Find my Injectors!</button>
    <p id="output"></p>
    <p id="output2"></p>
    <script type="text/javascript">
        function computeCC()  {
            var hp = document.getElementById("desiredHp").value;
            if (!isNaN(hp)) {
              hp = parseInt(document.getElementById("desiredHp").value);
              var eT = document.getElementById("engineType").value;
              document.getElementById("output").innerHTML = hp;
              document.getElementById("output2").innerHTML = eT;
            }
        }
    </script>
    

  • answered 2017-11-12 20:38 Shajith Kunnumbrath

    You need add value attribute to select option element, below.

    `<select id="engineType" type = "text">
            <option value="G60T">G60T</option>
            <option value="2.0 8v">2.0 8v</option>
            <option value="MK2 16v">MK2 16v</option>
            <option value="12V VR6">12V VR6</option>
            <option value="24V VR6">24V VR6</option>
            <option value="R32">R32</option>
            <option value="B5 S4">B5 S4</option>
        </select>`
    

  • answered 2017-11-12 22:16 Peter Leger

    • there is no type = "text/HTML/CSS"
    • <option> needs value
    • get selected value with el.options[el.selectedIndex].text

    In total

    function output() {
      var horsepower = document.getElementById("horsepower"),
        outputHorsepower = document.getElementById("outputHorsepower"),
        engine = document.getElementById("engine"),
        outputEngine = document.getElementById("outputEngine");
    
      outputHorsepower.innerHTML = horsepower.value;
      outputEngine.innerHTML = engine.options[engine.selectedIndex].text;
    }
    <p> Please enter your desired horse power!</p>
    <div>
      <label>Desired Horsepower: </label>
      <input type="text" id="horsepower" />
    </div>
    <div>
      <label>Which Engine:</label>
      <select id="engine" type="text">
            <option value="G60T">G60T</option>
            <option value="2.0 8v">2.0 8v</option>
            <option value="MK2 16v">MK2 16v</option>
            <option value="12V VR6">12V VR6</option>
            <option value="24V VR6">24V VR6</option>
            <option value="R32">R32</option>
            <option value="B5 S4">B5 S4</option>
        </select>
    </div>
    <button id="button" onclick="output();">Find my Injectors!</button>
    <div id="outputHorsepower"></div>
    <div id="outputEngine"></div>