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

Question

I have objects for each team containing arrays of numbers inside of them

an example team(really setting an example atm, just look at all those goals scored)

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],

},

when I type the two teams names as parameters in the coefficient function in the console then it works exactly how I want it to.

I would like the user to be able to type the two teams into search boxes and on enter run the function but I can't seem to pass the two values into the function.

I will need to change the search to actually grab the link from the object below, but for now I just want it to function so I am typing the teams exactly as the object is named.

My first project so any guidance would be helpful

I've tried to use the searchbox.value as shown in the showteams function and have tried using JSON.parse methods aswell as ${awayTeam} but I'm not 100% sure what they are doing, please find my script (- the teams and their stats) below

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);

when I type coefficient(homeTeam, awayTeam) into the console it does the statistics and prints them in their corresponding boxes but when I use search it comes up with

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)

at request, here is my 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

I got it, it was just using a string and not the object, instead I found if I matched the string to one of the objects in the array of teams then I could grab the object and submit that which is where all the data is. Not sure if it's the most efficient way but it works

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)
};