0

I'm trying to get a calculated total from getting the values from these drop boxes and running them through a function with preset values but it doesn't return anything. The alert box doesn't pop up either, could anyone tell me exactly what's wrong here?

Here is my code snippet:

<!DOCTYPE html>
<html>
<head>

<script>
    function calcTotal(){
        var numAdult = parseInt(document.getElementById('adultStandard').value);
        var numConcession = parseInt(document.getElementById('concessionStandard').value);
        var numChild = parseInt(document.getElementById('childStandard').value);

        var adultStandard = 10.10;
        var concessionStandard = 11.50;
        var childStandard = 12.70;

        var saleTotal = (adultStandard * numAdult) + (concessionStandard * numConcession) + (childStandard * numChild);

        document.getElementById('totalCost').innerHTML = "test";

        return true;
        alert("Total is: " saleTotal);
    }

</script>
</head>
<body>
<form action onchange='return calcTotal()' method='post'>
Adult: 
<select id='adultStandard' name='adultStandard'>
    <script>
        var maxqty = 10;
        for ( var i=0; i<=maxqty; i++ )
        document.write('<option value="'+i+'">'+i+'</option>');
    </script>
</select>
<br>
Concession: 
<select id='concessionStandard' name='concessionStandard'>
    <script>
        var maxqty = 10;
        for ( var i=0; i<=maxqty; i++ )
        document.write('<option value="'+i+'">'+i+'</option>');
    </script>
</select>
<br>
Child: 
<select id='childStandard' name='childStandard'>
    <script>
        var maxqty = 10;
        for ( var i=0; i<=maxqty; i++ )
        document.write('<option value="'+i+'">'+i+'</option>');
    </script>
</select>
<br>
<label>
Total: $<input id='totalCost' readonly='readonly' value='0'>
</label>
</form>
</body>
</html>
Vikrant
  • 4,920
  • 17
  • 48
  • 72
Ayrton Lim
  • 11
  • 1
  • 3
    `alert("Total is: " saleTotal);` has a syntax error and is unreachable after the `return`. `document.write` is [not recommended](https://stackoverflow.com/q/802854/4642212) for DOM manipulations. Inline event handlers like `onchange` are [not recommended](https://stackoverflow.com/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](https://stackoverflow.com/a/43459991/4642212) way of using events. Always [use `addEventListener`](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Inline_event_handlers_%E2%80%94_don't_use_these) instead. – Sebastian Simon Sep 23 '19 at 00:53
  • What does your console for the rendered output show? Errors and warnings? – JayRizzo Sep 23 '19 at 00:55
  • Use the [browser console (dev tools)](https://webmasters.stackexchange.com/q/8525) (hit `F12`) and read any errors. Use tools like [JSHint](http://jshint.com/) to find problems with your code immediately. – Sebastian Simon Sep 23 '19 at 00:56
  • I agree with @SebastianSimon. Your code is suffering from simple mistakes that could be highlighted by some popular developer tools. I also recommend you to check out VS Code, Atom or WebStorm code editor that will make the development and learning process easier for you. – spik3s Sep 23 '19 at 03:06
  • Here is a link to a fiddle which shows what Sebastian was talking about in regards to the syntax error and return statement. I pulled out the form stuff and the onchange event, but wasn't going to do the addEventListener for you.... Just wanted to make sure you had a little code to go with the context. I added console.log statements... these help you debug when you don't have an ide like the other recommended... I agree you should get one though: https://jsfiddle.net/25960yug/ – D3TXER Sep 23 '19 at 04:17

0 Answers0