JS element not displaying

Question

I am trying to create a simple form that when a user enters the number of respective, countries, states or cities that one has visited it displays that sum. The form resets as desired upon the page being reloaded, however I am not seeing the placesTraveled element being displayed. Am I overlooking a typo or missing an essential element?

HTML Snippet:

      <article>
         <h3>Oh the places you have gone</h3>
         <p>This past year has been tough for those who love to travel, as a reminder to ourselves<br>
         of the places we have already been, fill in the form below to see all the places you have been</p>   
         <form id="placesTraveledForm">
            <fieldset>
               <legend><span>Places Traveled</span></legend>
               <input class="input p-section p-border" type="number" min="1" max="195" id="countries" value="1" />
               <label for="countries">
                  <p># of countries visited (1&#8209;195)</p>
               </label>

               <input class="input p-section p-border"  type="number" min="1" id="states" value="1" />
               <label for="states">
                  <p># states, territories, or provinces visited </p>
               </label>

               <input class="input p-section p-border"  type="number" min="1" id="cities" value="1" />
               <label for="cities">
                  <p># cities, hamlets, or towns visited </p>
               </label>
            </fieldset>
         </form>
      </article>
      <aside>
         <p>Number of Places Traveled To: 
            <span id="placesTraveled">
            </span>
         </p>
      </aside>

  </div>

JavaScript Snippet:

//global variables
var totalNumber = 0;

// calculates places visted based upon user entry 
function calcPlaces() {
    var con = document.getElementById("countries");
    var st = document.getElementById("states");
    var cty = document.getElementById("cities");
    totalNumber = con.value + st.value + cty.value;
    document.getElementById("placesTraveled").innerHTML = totalNumber;
}

// sets all form field values to defaults
function resetForm() {
    document.getElementById("countries").value =1;
    document.getElementById("states").value =1;
    document.getElementById("cities").value =1;
    calcPlaces();
    createEventListeners();
}
//create event listeners
function createEventListeners () {
  document.getElementById("countries").addEventListener("change", calcStaff, false);
  document.getElementById("states").addEventListener("change", calcStaff, false);   
  document.getElementById("cities").addEventListener("change", calcStaff, false);
}
//resets form when page is reloaded
document.addEventListener("load", resetForm, false);
createEventListeners()```

`Uncaught ReferenceError: calcStaff is not defined` (in `createEventListeners`) — blex, Apr 02 '21 at 16:27
Looks like a simple typo issue. `calcStaff` vs `calcPlaces`. Check your browser dev tools console for errors thrown. Always mention errors in questions also — charlietfl, Apr 02 '21 at 16:29
Also, when adding the values together, they are concatenated because they are Strings (`"1" + "1" === "11"`). You'll want to [convert them to numbers](https://stackoverflow.com/questions/1133770/how-to-convert-a-string-to-an-integer-in-javascript) — blex, Apr 02 '21 at 16:31

score 0 · Accepted Answer · answered Apr 02 '21 at 17:01

the code mentioned totalNumber = con.value + st.value + cty.value; They are actually strings, not numbers. The easiest way to produce a number from a string is to prepend it with replace this line with

totalNumber = +con.value + +st.value + +cty.value;

calcStaff is not a function actual name of your function is calcPlaces

 
 <html><div>
    <article>
         <h3>Oh the places you have gone</h3>
         <p>This past year has been tough for those who love to travel, as a reminder to ourselves<br>
         of the places we have already been, fill in the form below to see all the places you have been</p>   
         <form id="placesTraveledForm">
            <fieldset>
               <legend><span>Places Traveled</span></legend>
               <input class="input p-section p-border" type="number" min="1" max="195" id="countries" value="1" />
               <label for="countries">
                  <p># of countries visited (1&#8209;195)</p>
               </label>

               <input class="input p-section p-border"  type="number" min="1" id="states" value="1" />
               <label for="states">
                  <p># states, territories, or provinces visited </p>
               </label>

               <input class="input p-section p-border"  type="number" min="1" id="cities" value="1" />
               <label for="cities">
                  <p># cities, hamlets, or towns visited </p>
               </label>
            </fieldset>
         </form>
      </article>
     <aside>
         <p>Number of Places Traveled To: 
            <span id="placesTraveled">
            </span>
         </p>
      </aside>
  </div>
  <script>
  var totalNumber = 0;

// calculates places visted based upon user entry 
function calcPlaces() {
    var con = document.getElementById("countries");
    var st = document.getElementById("states");
    var cty = document.getElementById("cities");
    totalNumber = +con.value + +st.value + +cty.value;
  
    document.getElementById("placesTraveled").innerHTML = totalNumber;
}

// sets all form field values to defaults
function resetForm() {
    document.getElementById("countries").value =1;
    document.getElementById("states").value =1;
    document.getElementById("cities").value =1;
    calcPlaces();
    createEventListeners();
}
//create event listeners
function createEventListeners () {
  document.getElementById("countries").addEventListener("change", calcPlaces, false);
  document.getElementById("states").addEventListener("change", calcPlaces, false);   
  document.getElementById("cities").addEventListener("change", calcPlaces, false);
}
//resets form when page is reloaded
document.addEventListener("load", resetForm, false);
createEventListeners()
</script>
</html>

JS element not displaying

1 Answers1

totalNumber = +con.value + +st.value + +cty.value;