Question

每个团队都有一些对象，其中包含数字数组

一个示例团队（真的设置了一个示例atm，只看所有那些进球）

luton = {

    name: "Luton Town",
    link: "luton",
    league: "League 1",
    homeGoalsScored: [1, 2, 3, 1, 2, 3, 2, 4, 5, 4, 2, 2, 0, 4, 3],
    homeGoalsConceded: [1, 0, 2, 0, 2, 2, 0, 1, 1, 0, 0, 0, 0, 0, 2],

    awayGoalsScored: [0, 3, 1, 2, 0, 1, 3, 0, 0, 1, 2, 2, 2, 1, 1],
    awayGoalsConceded: [1, 3, 1, 2, 0, 1, 3, 0, 0, 1, 1, 0, 2, 1, 0],

    totalGoalsScored: [0, 1, 1, 2, 3, 1, 1, 1, 0, 2, 2, 3, 2, 2, 4, 2, 0, 
    5, 3, 4, 2, 2, 2, 2, 2, 0, 1, 4, 1, 3],
    totalGoalsConceded: [1, 1, 3, 0, 2, 1, 2, 0, 0, 2, 1, 2, 3, 0, 1, 0, 0, 
    1, 1, 0, 0, 1, 0, 0, 2, 0, 1, 0, 0, 2],

},

当我在控制台的系数函数中输入两个团队的名称作为参数时，它将完全按照我的要求工作。

我希望用户能够在搜索框中键入两个团队，然后在输入时运行该函数，但是我似乎无法将两个值传递给该函数。

我将需要更改搜索以实际从下面的对象中获取链接，但是现在我只希望它起作用，因此我要按照对象的名称准确地输入团队。

我的第一个项目，所以任何指导都会有所帮助

我尝试使用showteams函数中所示的searchbox.value，并尝试使用JSON.parse方法以及${awayTeam}，但我不确定100％他们在做什么，请找到我的下面的脚本（-球队及其状态）

const awayGoalsBox = document.getElementById('away-gs');
const awayGoalsConcededBox = document.getElementById('away-gc');

const homeGoalsBox = document.getElementById('home-gs');
const homeGoalsConcededBox = document.getElementById('home-gc');

const arrAvg = (arr => arr.reduce((a, b) => a + b, 0) / arr.length); 

function applyGoals(stat, box) {
    var filled = (`${stat}`);
    box.innerHTML = filled;
};

function home(team) {
    var avgHomeGoalsLong = arrAvg(team.homeGoalsScored);
    var avgHomeGoals = avgHomeGoalsLong.toFixed(2);
    applyGoals(avgHomeGoals, homeGoalsBox);

    var avgHomeGoalsConcededLong = arrAvg(team.homeGoalsConceded);
    var avgHomeGoalsConceded = avgHomeGoalsConcededLong.toFixed(2);
    applyGoals(avgHomeGoalsConceded, homeGoalsConcededBox);
};

function away(team) {
    var avgAwayGoalsLong = arrAvg(team.awayGoalsScored);
    var avgAwayGoals = avgAwayGoalsLong.toFixed(2);
    applyGoals(avgAwayGoals, awayGoalsBox);

    var avgAwayGoalsConcededLong = arrAvg(team.awayGoalsConceded);
    var avgAwayGoalsConceded = avgAwayGoalsConcededLong.toFixed(2);
    applyGoals(avgAwayGoalsConceded, awayGoalsConcededBox);
};

function coefficient(homeTeam, awayTeam) {

    var avgHomeGoals = arrAvg(homeTeam.homeGoalsScored);
    var avgHomeGoalsConceded = arrAvg(homeTeam.homeGoalsConceded);

    var avgAwayGoals = arrAvg(awayTeam.awayGoalsScored);
    var avgAwayGoalsConceded = arrAvg(awayTeam.awayGoalsConceded);

    var i = (avgAwayGoals - avgHomeGoals);
    var j = (avgHomeGoalsConceded - avgAwayGoalsConceded);

    if (avgAwayGoalsConceded <= 0.5) {
        q = .5
    } else if (avgAwayGoalsConceded <= 1) {
        q = .4
    } else if (avgAwayGoalsConceded <= 1.5) {
        q = .3
    } else if (avgAwayGoalsConceded <= 2) {
        q = .2
    } else if (avgAwayGoalsConceded <= 2.5) {
        q = .1
    } else {
        q = 0
    };

    if (avgHomeGoalsConceded <= 0.5) {
        u = -.5
    } else if (avgHomeGoalsConceded <= 1) {
        u = -.4
    } else if (avgHomeGoalsConceded <= 1.5) {
        u = -.3
    } else if (avgHomeGoalsConceded <= 2) {
        u = -.2
    } else if (avgHomeGoalsConceded <= 2.5) {
        u = -.1
    } else {
        u = 0
    };

    if (avgAwayGoals <= 0.5) {
        y = 0
    } else if (avgAwayGoals <= 1) {
        y = .1
    } else if (avgAwayGoals <= 1.5) {
        y = .2
    } else if (avgAwayGoals <= 2) {
        y = .3
    } else if (avgAwayGoals <= 2.5) {
        y = .4
    } else {
        y = .5
    };    

    if (avgHomeGoals <= 0.5) {
        cc = 0
    } else if (avgHomeGoals <= 1) {
        cc = -.1
    } else if (avgHomeGoals <= 1.5) {
        cc = -.2
    } else if (avgHomeGoals <= 2) {
        cc = -.3
    } else if (avgHomeGoals <= 2.5) {
        cc = -.4
    } else {
        cc = -.5
    };

    var sum = (i + j + q + u + y + cc);

    away(awayTeam);
    home(homeTeam);

    var awaybox = document.querySelector(`#away`);
    var homebox = document.querySelector(`#home`);

    document.getElementById('name-away').innerHTML = awayTeam.name;
    document.getElementById('name-home').innerHTML = homeTeam.name;

    var sumNum = parseFloat(sum);
    var coeff = (sumNum / 5);   
    document.getElementById('coefficient').innerHTML = coeff.toFixed(2);
};

const homeSearch = document.querySelector('#home-search');
const awaySearch = document.querySelector('#away-search');
const submit = document.querySelector('#submit');

function showteams(e) {
    e.preventDefault();

    var homeTeam = homeSearch.value;
    var awayTeam = awaySearch.value;

    coefficient(homeTeam, awayTeam);
};

submit.addEventListener('click', showteams);

当我在控制台中输入系数（homeTeam，awayTeam）时，它会进行统计并在相应的框中打印它们，但是当我使用搜索时，它会显示

script.js:5 Uncaught TypeError: Cannot read property 'reduce' of undefined
    at arrAvg (script.js:5)
    at coefficient (script.js:208)
    at HTMLInputElement.showteam (script.js:1524)

根据要求，这是我的html

<body>
    <div class="grid">
        <header class="grid">
            <h1>betMarco</h1>
        </header>

    <div class="stats-box home" id="home">
        <h3 class="heading">HOME</h3>
        <form class="add-items">
            <input type="text" name="team" class="home-search" id="home- 
             search" placeholder="Home Team" value=" " required>
            <input type="submit" value="Submit" id="submit">
        </form>

        <div class="values name">
            <p id="name-home"></p>
        </div>
        <div class="values goals-scored">
            <h6>HGS PG:</h6>
            <p id="home-gs"></p>
        </div>
        <div class="values goals-conceded">
            <h6>HGC PG:</h6>
            <p id="home-gc"></p>
        </div>
    </div>


    <div class="stats-box away" id="away">
        <h3 class="heading">AWAY</h3>
        <form class="search-items">
                <input type="text" name="team" class="away-search"  
                 id="away-search" placeholder="Away Team" value=" ">
        </form>

        <div class="values name">
            <p id="name-away"></p>
        </div>
        <div class="values goals-scored">
            <h6>AGS PG:</h6>
            <p id="away-gs"></p>
        </div>
        <div class="values goals-conceded">
            <h6>AGC PG:</h6>
            <p id="away-gc"></p>
        </div>
      </div>
  </div>
  <script src="script.js" defer></script>
</body>

Answer 1

我明白了，它只是使用一个字符串而不是对象，相反，我发现如果将字符串与团队数组中的一个对象匹配，那么我可以抓住该对象并提交所有数据是。不确定这是否是最有效的方法，但是否可行

function showTeams(e) {
e.preventDefault();

let homeTeam = '';
let awayTeam = '';

if (premiership.find(o => o.name == homeSearch.value) || premiership.find(o => o.link == homeSearch.value)) {
    homeTeam = premiership.find(o => o.name == homeSearch.value) || premiership.find(o => o.link == homeSearch.value)
} else if (championship.find(o => o.name == homeSearch.value) || championship.find(o => o.link == homeSearch.value)) {
    homeTeam = championship.find(o => o.name == homeSearch.value) || championship.find(o => o.link == homeSearch.value)
} else if (leagueOne.find(o => o.name == homeSearch.value) || leagueOne.find(o => o.link == homeSearch.value)) {
    homeTeam = leagueOne.find(o => o.name == homeSearch.value) || leagueOne.find(o => o.link == homeSearch.value)
} else if (leagueTwo.find(o => o.name == homeSearch.value) || leagueTwo.find(o => o.link == homeSearch.value)) {
    homeTeam = leagueTwo.find(o => o.name == homeSearch.value) || leagueTwo.find(o => o.link == homeSearch.value)
};

if (premiership.find(o => o.name == awaySearch.value) || premiership.find(o => o.link == awaySearch.value)) {
    awayTeam = premiership.find(o => o.name == awaySearch.value) || premiership.find(o => o.link == awaySearch.value)
} else if (championship.find(o => o.name == awaySearch.value) || championship.find(o => o.link == awaySearch.value)) {
    awayTeam = championship.find(o => o.name == awaySearch.value) || championship.find(o => o.link == awaySearch.value)
} else if (leagueOne.find(o => o.name == awaySearch.value) || leagueOne.find(o => o.link == awaySearch.value)) {
    awayTeam = leagueOne.find(o => o.name == awaySearch.value) || leagueOne.find(o => o.link == awaySearch.value)
} else if (leagueTwo.find(o => o.name == awaySearch.value) || leagueTwo.find(o => o.link == awaySearch.value)) {
    awayTeam = leagueTwo.find(o => o.name == awaySearch.value) || leagueTwo.find(o => o.link == awaySearch.value)
};

coefficient(homeTeam, awayTeam)
};

我可以将搜索框值作为参数传递给函数吗？

1 个答案: