Javascript innerhtml不显示在第二个函数调用undefined函数

Question

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

我在做什么

我正在尝试创建一个赔率比较计算器，它将显示所选比赛的最佳赔率。你可以view my fiddle here

的Javascript

for %%F in (*) do (
   %= Comment within code block     =%
   %= 2nd comment within code block =%
   FINDSTR /B %=Must match beginning of line=%  "string" %= Search string =%  "%%F" %= File to search =%
)

HTML

var app = angular.module('sortModule', [])
app.controller('MainController', function($scope,$filter){    
$scope.languages = [ 
        { name: 'English', image: '/images/english.png',key:2 },
        { name: 'Hindi', image: '/images/hindi.png',key:3 },
    { name: 'English', image: '/images/english.png',key:2},
    { name: 'Telugu', image: '/images/telugu.png',key:1 }];        

var newLanguages = []
newLanguages = angular.copy($scope.languages);  
function sortImages() { 
        $scope.languages = []
    $scope.keys = []        
        for(language in newLanguages) {
            $scope.keys.push(newLanguages[language])
    }
    $filter('orderBy')($scope.keys, 'key')
    console.log(JSON.stringify($scope.keys))
}
sortImages();

我的问题

1. 在我的小提琴中运行时，我收到错误 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
2. 我觉得这段代码不是很有效，而且可以大大改进，任何有关如何改进的提示或建议将不胜感激。

最终输出应该是什么样的



非常感谢任何帮助和建议

Answer 1

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

您需要将此设置放在全局范围内，方法是将onload中的JS设置更改为No wrap - in head

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

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

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

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