CODEWITHSUNDEEP
javascripthtmlarraysfunction
Abe
Abe

Reputation: 23

Javascript functions to print SIMPLE

I am new to programming and can not figure out why the innerHTML function will not print a value on the screen (I realized I used two functions and it seems extra for this small amount of code but it is because it is for a larger project)

<!DOCTYPE html>
<html>

<head>
    <title></title>
</head>
<body>
    <form id="moneyform" name="moneyform">
        <fieldset>
            <select id="money" name="money" onselect="calculateTotal()">
                <option value="loon">1 dollar</option>
                <option value="toon">2 dollar</option>
            </select>
            <br>
            <p id="pg"></p>
        </fieldset>
    </form>
<script type="text/javascript" src="TEST.js"></script>
</body>
</html>

//JAVASCRIPT BELOW

var moneyprice = new Array();
moneyprice["loon"] = 1;
moneyprice["toon"] = 2;

function moneyTotal() {
    var mons = 0;
    var frm = document.forms["moneyform"];
    var selectedMoney = frm.elements["money"];
    mons = moneyprice[selectedMoney.value]

    return mons;
}

function calculateTotal() {
    var total = moneyTotal();

    document.getElementById("pg").innerHTML = total;

}

Upvotes: 2

Views: 70

Answers (1)

Scott Marcus
Scott Marcus

Reputation: 65808

First, you are using the onselect event to kick things off, but select is for when text inside of a text field or textarea is selected by the user. You'll want to use the change event, which triggers when the value of an element changes.

Next, you aren't working with your Array properly and it's causing your result to come back as nothing. Arrays have non-negative integer indexes where data can be stored. They don't have key names to store data in - - Objects do that. You can see here that after these lines run, you still have an empty Array:

var moneyprice = new Array();  // Ok.

// moneyprice doesn't/can't have a "loon" or a "toon" index
// so neither of these lines accomplish anything
moneyprice["loon"] = 1;        
moneyprice["toon"] = 2;

console.log(moneyprice); // Empty array

// ******************************************

// Now, this is how to use an array:
var moneyprice2 = new Array();  // Ok.

// You interact with an Array via its numeric indexes:
moneyprice2[0] = "loon";        
moneyprice2[1] = "toon";

console.log(moneyprice2); // Empty array

Now, it's not clear as to what you are trying to do with that Array anyway and it seems that what you are attempting to do doesn't really make much sense - your functions talk about money and calculating totals, but your select has string values.

Lastly, the code you are using uses ancient techniques that you really shouldn't get too comfortable using. There's a lot of bad code out there, so learn from a reputable source. The Mozilla Developer Network is one.

See this scaled back solution to give you an idea of the "moving parts" to get something up and running. Notice how all the JavaScript is separated from the HTML.

// Get your element references the proper way.
// No need to get a reference to the form, just to get a reference
// to the select and even if we did want to get a reference
// to the form, we use the modern DOM API to do it (not document[forms]).
let select = document.getElementById("money");
let pg = document.getElementById("pg");

// Set up event handlers in JavaScript, not with HTML attributes
select.addEventListener("change", calculateTotal);

function calculateTotal() {
  // .innerHTML should only be used when the string you are dealing with
  // contains HTML that needs to be parsed as such. When there isn't any
  // HTML, use .textContent
  pg.textContent = select.value;
}
<form id="moneyform">
  <fieldset>
    <select id="money" name="money">
      <option value="loon">1 dollar</option>
      <option value="toon">2 dollar</option>
    </select>
    <br>
    <p id="pg"></p>
  </fieldset>
</form>

Upvotes: 2

Related Questions