When i created a input box, how can i make it so it outputs how much I put into the input box?

Question

Im having trouble making this work and I cant find the loose end. Im trying to make it so when I put a certain amount of rolls in, it outputs as that many rolls and records the data. But when I click the button, nothing happens.

<html>
    <head>
        <meta charset="utf-8" />
        <title>Rollstats</title>
        <script src="http://compsciconcepts.com/random.js"></script>
        <script>
            function Roll() {
                roll1 = RandomInt(1, 6);
                roll2 = RandomInt(1, 6);

                if (roll1 == roll2) {
                    doubleSpan.innerHTML = Number(doubleSpan.innerHTML) + 1;
                } else if (roll1 + roll2 == 7) {
                    sevenSpan.innerHTML = Number(sevenSpan.innerHTML) + 1;
                    if (roll1 == 3 || roll1 == 4) {
                        naturalSpan.innerHTML = Number(naturalSpan.innerHTML) + 1;
                    }
                }
            }

            function ResetCounts() {
                doubleSpan.innerHTML = 0;
                sevenSpan.innerHTML = 0;
                naturalSpan.innerHTML = 0;
            }
        </script>
    </head>
    <body style="text-align: center">
        <h1>Dice Simulations</h1>
        <p>
            Desired number of rolls:
            <input type="number" id="desiredBox" min="0" max="9999999" value="1000" />
            <button onclick="Roll();">Click to Roll</button>
            <button onclick="ResetCounts();">Reset Counts</button>
        </p>
        <hr />
        <p>Number of doubles: <span id="doubleSpan">0</span></p>
        <p>Number of sevens: <span id="sevenSpan">0</span></p>
        <p>Number of Natural sevens:<span id="naturalSpan">0</span></p>
    </body>
</html>

An error happens: "Uncaught ReferenceError: RandomInt is not defined" — Jasper Habicht, Nov 19 '21 at 02:43
Seems some codes are missed on the question. What is `RandomInt` function? — jacobkim, Nov 19 '21 at 03:03

score 1 · Answer 1 · answered Nov 19 '21 at 02:42

1

you can't just call doubleSpan.innerHTML you need to get the element first:

doubleSpan = document.getElementById('doubleSpan');
doubleSpan.innerHTML = "..."

answered Nov 19 '21 at 02:42

Miguel Angel Acevedo

299
5
14

you can get some more complex examples here: https://www.javascripttutorial.net/javascript-dom/javascript-innerhtml/ – Miguel Angel Acevedo Nov 19 '21 at 02:44
1

Im really new to this, just started a week ago. I thought I did call it when I put it in line 14? – NFT Nov 19 '21 at 02:47
I send you a link too, with more example, also how to create elements, or insert HTML code, useful and still beginner level. – Miguel Angel Acevedo Nov 19 '21 at 02:54
*"you can't just call doubleSpan.innerHTML"* - why not? See: [Do DOM tree elements with ids become global variables?](https://stackoverflow.com/questions/3434278/do-dom-tree-elements-with-ids-become-global-variables) – Spectric Nov 19 '21 at 03:00
that's not a good practice since it's not a standard, some browsers will have the element as global variable and some won't but all will run "getElementBy". – Miguel Angel Acevedo Nov 19 '21 at 03:17
Even in the same link you sent me it mention, you need to change some settings in Firefox to work same a IE. – Miguel Angel Acevedo Nov 19 '21 at 03:18
Then I correct myself `you can't` by `you shouldn't` – Miguel Angel Acevedo Nov 19 '21 at 03:23

When i created a input box, how can i make it so it outputs how much I put into the input box?

1 Answers1