Javascript innerhtml 在第二次函数调用未定义函数时不显示

Question

首先我想说我是一名学生，对前端开发还很陌生，对 javascript 不是很熟悉，但我正在慢慢尝试通过编写一些非常基础的东西来学习。

我在做什么

我正在尝试创建一个赔率比较计算器，它将显示所选比赛的最佳赔率。你可以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>

我的问题

1. 在我的 fiddle 中运行它时出现错误 undefined function
创建团队()
2. 我觉得这段代码不是很有效，可以大大改进，非常感谢任何关于如何改进它的提示或建议。

最终输出应该是什么样的

任何帮助和建议将不胜感激

Answer 1

createTeams 方法在全局范围内不可见，因为它包含在 document.ready 事件处理程序中。

您需要将 fiddle 中的 JS 设置从 onload 更改为 No wrap - in head

为了改进代码，您可以形成团队消息的对象(键值)

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

然后根据团队选择，您可以简单地显示消息

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