0

I'm trying to create a game in which an image of a flag is shown and the user must input the correct name of the flag. I've used a random number generator to generate a flag, with each flag having a value assigned to it as the name. How can I fix my function so it can properly compare the user input to the value for the flag object, and thus alert the user if they are correct or incorrect? New to javascript.

Currently, the index.html has a form wherein the user inputs their guess. This guess has the id of "guess". Then the javascript calls this value and is supposed to compare it to the value associated with the flag object. If they match, it should alert the user "correct", if incorrect it should alert "incorrect". However, with my current script, nothing happens when inputting the answer.

HTML:

    <div class="imageContainer">

        <script language="javascript">
            document.write("<div id = flagImage><img src = " + link[random_num].flag + " alt = Flag width = 250px></div>");
        </script>

    </div>


    <div class="guessEnter">

        <form onclick="return false">

             <input type="text" id="guess" placeholder="Make a guess...">

                 <div class="submitButton">
                 <input type="submit" onclick="checkGuess();">
                 </div>

        </form>
    </div>

javascript: 

/* Pulls random image to display on page */

random_num = (Math.round((Math.random() * 4) + 1));

link = new Array;

link[1] = { flag: "../assets/flagImages/ad.png", value: 'andorra' };
link[2] = { flag: "../assets/flagImages/ae.png", value: 'uae' + 'united arab emirates' }
link[3] = { flag: "../assets/flagImages/af.png", value: 'afghanistan' };
link[4] = { flag: "../assets/flagImages/ag.png", value: 'antigua and barbuda' };

/* Execute function on enter */

guess.addEventListener('keypress', function (e) {
if (e.key === 'Enter') {
    checkGuess();
    }
});


/* Function that compares user input to link value */
const guess = document.getElementById("guess");

function checkGuess() {

    if (link[random_num].value.toLowerCase() === guess.value.toLowerCase()) {
        alert('You Win!'); //correct guess

    } else {
        alert('Wrong!'); //wrong guess
    }

}
Drew Kopp
  • 1
  • 1
  • 1
    why is there an onclick on the form tag? – epascarello Nov 08 '22 at 18:18
  • Never use `document.write`. If you want to add content to the page, do that with normal modern JS. Just have the div already live there, and have your script set its textContent once it loads (using the `defer` attribute on the script element to make your script run once the page is ready for queries). And scripts are JS by default in HTML5, you only need to specify `type` if it's _not_ JS. – Mike 'Pomax' Kamermans Nov 08 '22 at 18:23
  • There are so many bad-practice things in this code… `document.write` is [not recommended](/q/802854/4642212) for DOM manipulations, as it is obsolete, slow and not suitable for any evolving application. See [the documentation about the DOM API on MDN](//developer.mozilla.org/en/docs/Web/API/Document_Object_Model) and use methods and properties that aren’t discouraged. Inline event handlers like `onclick` are [bad practice](/q/11737873/4642212). They’re an [obsolete, cumbersome, and unintuitive](/a/43459991/4642212) way to listen for events. `
    ` makes little sense.
     – Sebastian Simon Nov 08 '22 at 18:25
  • Always [use `addEventListener`](//developer.mozilla.org/en/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. The [`keypress` event](//developer.mozilla.org/en/docs/Web/API/Element/keypress_event) is deprecated. Also, see [In JavaScript, why is \[ \] preferred over new Array();?](/q/1800594/4642212) and [How to prevent form from being submitted?](/q/3350247/4642212). Things like these make it difficult to debug your code. – Sebastian Simon Nov 08 '22 at 18:25
  • @Mike'Pomax'Kamermans For `type="module"`, it’s very much required. – Sebastian Simon Nov 08 '22 at 18:25
  • @epascarello probably because I don't exactly know what I'm doing. LOL – Drew Kopp Nov 08 '22 at 18:28
  • @SebastianSimon thanks for the tips. This project is for a class I am taking on web design. My professor sent me some earlier projects from previous students that created games, so much of it was adapting their code. I am new to javascript and don't always know what is outdated or not. – Drew Kopp Nov 08 '22 at 18:31
  • @SebastianSimon for context
    was put in to prevent the page from reloading on submission, though I see I should've put it on the submit button instead.
     – Drew Kopp Nov 08 '22 at 19:44

0 Answers0