0

I'm trying to get the underscores for my hangman game to show up on the HTML page, but it doesn't seem to be working. When I do run the HTML page, all I see is the text box. Any ideas on why this is happening?

CODE:

    //create array for words
    var listWords = ['cat', 'dog', 'mouse'];
    
    //displays the word in underscores
    var hiddenWord = [];
    
    //choose word randomly
    //Math.random returns integer between 0 (inclusive) and 1 (exclusive)
    //multiply Math.random with the length of the listWords array
    //Math.floor rounds down to nearest integer
    //note that array indexes start counting from 0, hence why we need to make sure the listWords index never reaches the actual length of the array
    var chosenWord = listWords[Math.floor(Math.random() * listWords.length)];
    
    //number of tries the user gets before game over
    var lives = 5;
    
    var s;
    
    function setup() {
     for (i = 0; i < chosenWord.length; i++) {
      hiddenWord[i] = '_';
     }
     s = hiddenWord.join(' ');
     return s;
    }
    
    function main() {
     var underscores = document.getElementById('hiddenWord');
     underscores.innerHTML = setup();
    }
<!--adding a title that will appear on the webpage-->
<h1>Hangman</h1>

<!--create a text box-->
  <input id='letter' type='text' maxlength="1" minlength="1" placeholder="Guess a letter" />

<div id='hiddenWord'></div>

<!--add instructions for the player-->
<h2>Instructions</h2>
Calvin Nunes
  • 6,376
  • 4
  • 20
  • 48
  • 7
    Where do you call `main()` ?! – Jonas Wilms Apr 24 '18 at 19:01
  • 4
    Two unused variables: `main` and `lives`. And `i` is not declared. Please try using the [debugging capabilities](https://developer.mozilla.org/en-US/docs/Mozilla/Debugging/Debugging_JavaScript) of your browser. Use tools like [JSHint](http://jshint.com/) to find problems with your code immediately. Did you assume that a function called `main` is executed automatically in JavaScript, like in other languages like C? That’s an incorrect assumption. You could’ve checked that by reviewing the [documentation or a tutorial](https://developer.mozilla.org/en-US/docs/Learn/JavaScript). – Sebastian Simon Apr 24 '18 at 19:03
  • `` – Harry B Apr 24 '18 at 19:07
  • 2
    Also (FYI), `.innerHTML` is for setting/getting strings that contain HTML that needs to be parsed as such. If you are working with a string that doesn't have any HTML in it, it's a waste of processing power. In those cases, use `.textContent` instead as this is for setting/getting strings that do not contain any HTML and/or need HTML parsing. – Scott Marcus Apr 24 '18 at 19:08
  • 4
    @HarryB No. Don’t recommend inline event listener attributes. Recommend `addEventListener("DOMContentLoaded", main);` or a variation thereof instead. – Sebastian Simon Apr 24 '18 at 19:08
  • In this case, why? – Harry B Apr 24 '18 at 19:09
  • 2
    @HarryB **[Here's why](https://stackoverflow.com/questions/43459890/javascript-function-doesnt-work-when-link-is-clicked/43459991#43459991)** inline event attributes should have stopped being a "thing" like 20 years ago. – Scott Marcus Apr 24 '18 at 19:09
  • 2
    @JonasW. Ah! Didn't even realize I forgot to call main, that makes sense. Thank you so much! –  Apr 24 '18 at 19:11
  • I'm clearly far more of a pragmatist about optimisation (or premature optimisation) than some. [This Q&A](https://softwareengineering.stackexchange.com/questions/86589/why-should-i-avoid-inline-scripting) offers a more balanced set of views (still valid) about the use of inline event listeners if anybody is interested. – Harry B Apr 24 '18 at 19:22
  • @HarryB The post you linked to is 7 years old and also presents opinions that are wrong. #'s 5 and 7 in the link I posted have nothing to do with style, they are performance reasons and the others, while certainly falling into the "stylistic" category, are also industry-standard best-practices that are very hard to make a case against using in modern web applications. With regard to your suggestion of `onload=...`, just placing a script at the end of the HTML removes the need to register a callback entirely and that also is a performance issue, because registering an event handler uses memory. – Scott Marcus Apr 24 '18 at 21:29
  • 1
    You're arguing for best practice. It's admirable. I know that for those with enough experience you're recommendation is good, correct, 'the right way'. What I won't agree with is that you're way is the only way. `onload="main()"` in this case is simple to implement, lightweight, clear, elegant, cross-browser compatible and even JavaScript novice friendly. – Harry B Apr 24 '18 at 21:55
  • I would suggest using `output` elements for each character, with empty ones styled with a bottom border, rather than trying to do it as one string. – Anthony Apr 24 '18 at 22:11

0 Answers0