Heather Won Heather Won - 4 months ago 12
HTML Question

HTML Simple DropDown list and Result

I am trying to create a simple calculator with drop down list and JavaScript and I'm having trouble getting a result.

In JavaScript, I wrote the code to return

1411.21
if the setting value is Office. Otherwise it should return 500.
However, when I click calculate button, it doesn't do anything.

This is my HTML code.

<html>
<form method="post">
<td>Setting : </td>
<select name="Setting" id="Setting">
<option value="Office">Office</option>
<option value="HOPD">HOPD</option>
</select>

<br/>

<td>Facility : </td>
<select name="Facility" id="Facility">
<option value="100015">Mount Sinai, 123 Main Street, New York</option>
<option value="100016">NYU Medical, 25 North Broadway, New York</option>
</select>




<table border=1>
<tr>
<td>Product Size : </td>
<td><100sq cm</td>
</tr>

<tr>
<td>Number of DFU patients :</td>
<td>10</td>
</tr>

<tr>
<td>Patient co-pay % (based on wage adj.rate) : </td>
<td>20%</td>
</tr>
<tr>
<td>Co-Pay percent actuallly collected : </td>
<td>75%</td>
</tr>

<tr>
<td></td>
<td>
<input type="button" id="button" value="calculate" onclick="settingValue();">
</td>
</tr>
<tr>
<td>Result :</td>
<td>
<input type="text" id="result" placeholder="result">
</td>
</tr>

</table>
</br></br>


<table>
<tr>
<td>Medicare Payment Category</td> <td>High</td> <td>Low</td>
</tr>
<tr>
<td>Medicare Payment</td> <td id="medicarepayment" style="display: none">
<td>
</tr>
</table>
</form>
</html>


And here is the java script code.

<script type="text/javascript">
var mydata = {
'Mount Sinai': ['100015','123 Main Street','New york'],
'NYU Medical' : ['100016,'25 North Broadway','New York]
}
var firstNum;
var secondNum;
var settingValue;

function settingValue(){
settingValue=document.getElementById("Setting").value;
document.getElementById("result").value=medicarePaymentCal(settingValue);

}


function medicarePaymentCal(value1){
var result;
if(value1=="Office"){
return 1411.21;
} else {
return 500;
}


}

function init() {
var button=document.getElementById("button");
button.onclick=medicarePaymentCal();
}

</script>

Answer

It looks like you're trying to get document.getElementById("setting").value but the actual ID is "Setting" as per

    <select name="Setting">
            <option value="Office">Office</option>
            <option value="HOPD">HOPD</option>
    </select>

Try changing the getElementById to document.getElementById("Setting").value

EDIT

Ok, I made a JSFiddle for you: https://jsfiddle.net/dktoxtne/1/

Let me know if that works! I don't remember all I changed, but I do remember you need to change the name="Setting" to id="Setting" and a few other things.