Javascript innerhtml not displaying on second function call undefined function

Question

I would like to start by saying I am a student, very new to front-end development and not really familiar with javascript, but i'm slowly trying to learn by coding some very basic stuff.

What I am doing

I am trying to create an odds comparison calculator, that will display the best odds for a selected match. You can view my fiddle here

Javascript

   function createTeams() {
  var tour = document.getElementById('tournaments').value;
  if (tour == "six-nations") {
    var create = document.getElementById('teamsDiv').innerHTML = "<h3>Select Team</h3><select id='teams'><option value='Wales'>Wales</option><option value='England'>England</option><option value='Ireland'>Ireland</option><option value='Scotland'>Scotland</option> <option value='France'>France</option><option value='Italy'>Italy</option></select><input type='submit' value='Check Odds' onClick='checkOdds()' />"

  }
}//function createteams


function checkOdds() {
  var teams = document.getElementById('teams').value;
  //set bookmaker values
  var EngBestOdds = "<h3>Best Odds For England:</h3> Ladbrokes @ 3.00";
  var WalesBestOdds = "<h3>Best Odds For Wales:</h3> BetVictor @ 4.33";
  var IrelandBestOdds = "<h3>Best Odds For Ireland:</h3>Sportingbet @ 4.00";
  var ScotlandBestOdds = "<h3>Best Odds For Scotland:</h3>Paddy Power @ 17.00 AND BetVictor @17.00"
  var FranceBestOdds = "<h3>Best Odds For France:</h3>Sportingbet @ 6.50"
  var ItalyBestOdds = "<h3>Best Odds For Italy:</h3>BetVictor @501.00"
    //get teams
  var selectedTeam = document.getElementById("teams").value
  if (selectedTeam == "England") {
    document.getElementById("dispOdds").innerHTML = EngBestOdds;
  }
  if (selectedTeam == "Wales") {

    document.getElementById("dispOdds").innerHTML = WalesBestOdds;
  }
  if (selectedTeam == "Ireland") {

    document.getElementById("dispOdds").innerHTML = IrelandBestOdds;
  }

  if (selectedTeam == "Scotland") {

    document.getElementById("dispOdds").innerHTML = ScotlandBestOdds;
  }


  if (selectedTeam == "France") {

    document.getElementById("dispOdds").innerHTML = FranceBestOdds;
  }

  if (selectedTeam == "Italy") {

    document.getElementById("dispOdds").innerHTML = ItalyBestOdds;
  }

} //function

HTML

<h3>Select Tournament</h3>
<select id="tournaments">
  <option value="">-----</option>
  <option value="six-nations">Six Nations</option>
</select>
<input type="submit" onclick="createTeams()" />
<div id="teamsDiv">
</div>
<div id="dispOdds">
</div>

My Problems

1. When running this in my fiddle I get the error undefined function createTeams()
2. I feel this code is not very effective, and can be greatly improved, any tips or advice as to how I can improve this will be greatly appreciated.

What the ultimate output should look like

Any help and advice will be greatly appreciated

Answer 1

createTeams method is not visible in the global scope since it is enclosed in document.ready event handler.

You need to put this in global scope by changing the JS settings in fiddle from onload to No wrap - in head

For improving the code, you can form an object (key-value) of team-message like

var teamMessage = {
  "England" : "Your odds are...";
}

then based on the team selection, you can simply show the message like

document.getElementById("dispOdds").innerHTML = teamMessage[ team ];