如果 <select>选项= 1，然后runaFunct否则runaFifferentFunct？怎么样？

Question

I'm a beginner here but I've made two functions that need to be dependent on a option. If the user selects "Wood" then it should run the WoodFunct. If they select "Dirt" then it should run that function. This should all be ran when the user clicks the submit button. I know I'm pretty close but I just cant seem to get it. Here's my code:

 function WoodFunct() { var areaLength = document.getElementById("textbox1").value; var areaWidth = document.getElementById("textbox2").value; var areaDepth = document.getElementById("textbox3").value; var answer =(parseFloat(areaLength)*parseFloat(areaWidth)*parseFloat(areaDepth))*27; var textbox4 = document.getElementById('textbox4'); textbox4.value=answer; } function DirtFunct() { var areaLength = document.getElementById("textbox1").value; var areaWidth = document.getElementById("textbox2").value; var areaDepth = document.getElementById("textbox3").value; var answer =(parseFloat(areaLength)*parseFloat(areaWidth)*parseFloat(areaDepth))*1.5; var textbox4 = document.getElementById('textbox4'); textbox4.value=answer; } 

 L: <input type="text" name="textbox1" id="textbox1" /><br> W: <input type="text" name="textbox2" id="textbox2" /> <br> D: <input type="text" name="textbox3" id="textbox3" /> <br> Product: <select> <option value='1' id="WoodProduct">Wood</option> <option value='2' id="DirtProduct">Dirt</option> </select><br> <input type="submit" name="button" id="button1" onclick="runAFunction" value="Submit" /> <br/> Needed sq. footage: <input type="text" name="textbox4" id="textbox4" readonly="true"/> 

Answer 1

You should wrap your inputs with form and bind onsubmit event:

 function WoodFunct() { var areaLength = document.getElementById("textbox1").value; var areaWidth = document.getElementById("textbox2").value; var areaDepth = document.getElementById("textbox3").value; var answer =(parseFloat(areaLength)*parseFloat(areaWidth)*parseFloat(areaDepth))*27; var textbox4 = document.getElementById('textbox4'); textbox4.value=answer; } function DirtFunct() { var areaLength = document.getElementById("textbox1").value; var areaWidth = document.getElementById("textbox2").value; var areaDepth = document.getElementById("textbox3").value; var answer =(parseFloat(areaLength)*parseFloat(areaWidth)*parseFloat(areaDepth))*1.5; var textbox4 = document.getElementById('textbox4'); textbox4.value=answer; } document.getElementById('form').onsubmit = function() { if (document.getElementById('select').value == 1) { WoodFunct(); } else { DirtFunct(); } return false; } 

 <form id="form"> L: <input type="text" name="textbox1" id="textbox1" /><br> W: <input type="text" name="textbox2" id="textbox2" /> <br> D: <input type="text" name="textbox3" id="textbox3" /> <br> Product: <select id="select"> <option value='1' id="WoodProduct">Wood</option> <option value='2' id="DirtProduct">Dirt</option> </select><br> <input type="submit" name="button" id="button1" value="Submit" /> <br/> Needed sq. footage: <input type="text" name="textbox4" id="textbox4" readonly="true"/> </form> 

Answer 2

if you use jquery, you can do

 $(function() {

     $("#button1").click(function(){

            var selected = $("#select option:selected").text();

            if(selected === 'Wood')
               WoodFunct();
            else if(selected === 'Dirt')
               DirtFunct();
     });


   });

Answer 3

A simple way to write the run a function would to check if each option is selected. Like so.

function runAFunction() {
    if(document.getElementById("WoodProduct").selected = true)
        WoodFunct();
    else if(document.getElementById("DirtProduct").selected = true)
        DirtFunct();
}