innerHTML isn't passing to JavaScript
Question
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
solution1
0 2017-11-12 20:35:43
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>
solution2
0 2017-11-12 20:38:10
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>`
solution3
0 2017-11-12 22:16:45
- 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Why isn't innerHtml working for this javascript?
Javascript - document.write() is working but document.innerHTML isn't
in general, in javascript, isn't using innerHTML an [in]security issue?
javascript - passing a string to innerHTML
JavaScript using innerHTML and dynamic value passing to innerHTML
Passing newline on a javascript page isn't working
Script isn't getting the innerHTML?
innerHTML isn't working with getElementsByClassName
passing javascript innerhtml variable to php
Passing a JavaScript variable to fill innerHTML
Related Tags