JavaScript Scoreboard - add sum of input fields into total result

Hauyne_Foxy · January 30, 2023, 1:55pm

Hi!

I am working on a little project of mine I call “Scrabble Scoreboard”. I am not the best at JS and need help with something. What I am trying to do is make a function that takes the value inserted into the input fields and add them to a “Total score”. I have an idea on how to do it, but I don’t think I am on the right track. Can someone help me, please. Below is the code thus far. (Ignore CSS, I will improve that later).

Scrabble Scoreboard

<!-- CSS -->
<style>

    body {
        background-image: url("https://cdn.pixabay.com/photo/2018/05/03/16/01/pattern-3371709_960_720.jpg");
        background-size: cover;
    }

    h1 {
        text-align: center;
        color: lightyellow;
        padding: 10px;
        background-color: rgb(9, 72, 49);
        border-radius: 20px;
        border-style: inset;
        border-color: green;
        border-width: 5px;
        font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }

    table.scrabble {
        margin-left: auto;
        margin-right: auto;
        padding: 4px;
        background-image: url("https://cdn.pixabay.com/photo/2017/02/13/03/57/texture-2061709_960_720.jpg");
    }

    td {
        padding: 4px;
        margin-left: auto;
        margin-right: auto;
        color: darkgreen;
    }

</style>

Scrabble Scoreboard































totalt.	totalt.	totalt.	totalt.

<!-- JavaScript -->

Thanks in advance!

m_hutley · January 30, 2023, 3:28pm

mmh… we’re gonna need some more code tagging there so we can see what you’re doing.

Code blocks start and end with a triple backtick followed by a line break:

```
code stuff
```

Hauyne_Foxy · January 30, 2023, 4:42pm

> <!DOCTYPE html>
> <!-- Laget av H.F. -->
> <html lang="en">
> <head>
>     <meta charset="UTF-8">
>     <meta http-equiv="X-UA-Compatible" content="IE=edge">
>     <meta name="viewport" content="width=device-width, initial-scale=1.0">
>     <title>Scrabble Scoreboard</title>
> 
>     <!-- CSS -->
>     <style>
> 
>         body {
>             background-image: url("https://cdn.pixabay.com/photo/2018/05/03/16/01/pattern-3371709_960_720.jpg");
>             background-size: cover;
>         }
> 
>         h1 {
>             text-align: center;
>             color: lightyellow;
>             padding: 10px;
>             background-color: rgb(9, 72, 49);
>             border-radius: 20px;
>             border-style: inset;
>             border-color: green;
>             border-width: 5px;
>             font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
>         }
> 
>         table.scrabble {
>             margin-left: auto;
>             margin-right: auto;
>             padding: 4px;
>             background-image: url("https://cdn.pixabay.com/photo/2017/02/13/03/57/texture-2061709_960_720.jpg");
>         }
> 
>         td {
>             padding: 4px;
>             margin-left: auto;
>             margin-right: auto;
>             color: darkgreen;
>         }
> 
>     </style>
> </head>
> <body>
>     <h1>Scrabble Scoreboard</h1>
>     <table class="scrabble">
> <!-- tabell -->
> <!-- Spiller x input -->
> <tr>
>     <td><input type="text" placeholder="Spiller 1"></th>
>     <td><input type="text" placeholder="Spiller 2"></th>
>     <td><input type="text" placeholder="Spiller 3"></th>
>     <td><input type="text" placeholder="Spiller 4"></th>
> </tr>
> <!-- input for poeng spillere får pr. tur -->
> <!-- valgte å ha med 30 inputs, slik at det ikke blir tomt for poeng utfylling -->
> <tr>
>     <td><input type="number" placeholder="X poeng" id="poeng1"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
> </tr>
> <tr>
>     <td><input type="number" placeholder="X poeng" id="poeng1"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
> </tr>
> <tr>
>     <td><input type="number" placeholder="X poeng" id="poeng1"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
> </tr>
> <tr>
>     <td><input type="number" placeholder="X poeng" id="poeng1"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
> </tr>
> <tr>
>     <td><input type="number" placeholder="X poeng" id="poeng1"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
> </tr>
> <tr>
>     <td><input type="number" placeholder="X poeng" id="poeng1"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
> </tr>
> <tr>
>     <td><input type="number" placeholder="X poeng" id="poeng1"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
> </tr>
> <tr>
>     <td><input type="number" placeholder="X poeng" id="poeng1"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
> </tr>
> <tr>
>     <td><input type="number" placeholder="X poeng" id="poeng1"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
> </tr>
> <tr>
>     <td><input type="number" placeholder="X poeng" id="poeng1"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
> </tr>
> <tr>
>     <td><input type="number" placeholder="X poeng" id="poeng1"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
> </tr>
> <tr>
>     <td><input type="number" placeholder="X poeng" id="poeng1"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
> </tr>
> <tr>
>     <td><input type="number" placeholder="X poeng" id="poeng1"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
> </tr>
> <tr>
>     <td><input type="number" placeholder="X poeng" id="poeng1"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
> </tr>
> <tr>
>     <td><input type="number" placeholder="X poeng" id="poeng1"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
> </tr>
> <tr>
>     <td><input type="number" placeholder="X poeng" id="poeng1"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
> </tr>
> <tr>
>     <td><input type="number" placeholder="X poeng" id="poeng1"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
> </tr>
> <tr>
>     <td><input type="number" placeholder="X poeng" id="poeng1"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
> </tr>
> <tr>
>     <td><input type="number" placeholder="X poeng" id="poeng1"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
> </tr>
> <tr>
>     <td><input type="number" placeholder="X poeng" id="poeng1"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
> </tr>
> <tr>
>     <td><input type="number" placeholder="X poeng" id="poeng1"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
> </tr>
> <tr>
>     <td><input type="number" placeholder="X poeng" id="poeng1"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
> </tr>
> <tr>
>     <td><input type="number" placeholder="X poeng" id="poeng1"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
> </tr>
> <tr>
>     <td><input type="number" placeholder="X poeng" id="poeng1"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
> </tr>
> <tr>
>     <td><input type="number" placeholder="X poeng" id="poeng1"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
> </tr>
> <tr>
>     <td><input type="number" placeholder="X poeng" id="poeng1"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
> </tr>
> <tr>
>     <td><input type="number" placeholder="X poeng" id="poeng1"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
> </tr>
> <tr>
>     <td><input type="number" placeholder="X poeng" id="poeng1"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
> </tr>
> <tr>
>     <td><input type="number" placeholder="X poeng" id="poeng1"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
>     <td><input type="number" placeholder="X poeng" id="poeng"></td>
> </tr>
> <tr>
>     <!-- total score -->
>     <td><input type="number" readonly id="totalScore1"> totalt.</td>
>     <td><input type="number" readonly id="totalScore"> totalt.</td>
>     <td><input type="number" readonly id="totalScore"> totalt.</td>
>     <td><input type="number" readonly id="totalScore"> totalt.</td>
> </tr>
>     </table>
> 
>     <!-- JavaScript -->
> <script>
> 
> //Scrap code 1
> /*function poengTotalt1() {
>     let arr = document.getElementById('poeng1');
>     let totalScore1 = 0;
>     for(let i=0;i<arr.length;i++) {
>         if(parseInt(arr[i].value))
>             totalScore1 += parseInt(arr[i].value);
>     }
>     document.getElementById('totalScore1').value = totalScore1;
> }*/
> 
> //Scrap code 2
> /*function totalSum() {
>     let result = document.getElementById('totalScore');
>     let nu, i = 0, total = 0;
>     while(nu = document.getElementById('totalScore'+(i++)) ) {
>         nu.value = nu.value.replace(/\\D/,"");
>         total = total + Number(nu.value);
>     }
>     result.value = total;
>     if(document.getElementById('poeng').value...)
> }*/
> 
> </script>
> 
> </body>
> </html>

Hauyne_Foxy · January 30, 2023, 4:43pm

Sorry. I did not notice that you could prevent it from turning the text into a functional code. Is this better (I’m new to Stack overflow hehe).

mabismad · January 30, 2023, 9:22pm

ids (identifiers) must be unique. except for an id to reference the html table by, you should not plan on using ids for this.

you are using a html table for this data. you should loop over the rows and columns of the table to produce the totals.

you also need to decide when you are going to calculate and display the totals, once on page load? every change in a column value?

you should not put the totals into form fields and use the submitted total values. instead, re-calculate the totals on the server when the data is submitted.

system · May 2, 2023, 4:23am

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.