Home>
`` `` `` (function () {
  'use strict';
  var btn = document.getElementById ('btn');
  btn.addEventListener ('click', function () {
    var n = Math.random ();
    if (n<0.9) {
      this.textContent ='Ah';
    }
    else if (n<0.9) {
      this.textContent ='I';
    }
    else if (n<0.9) {
      this.textContent ='U';
    }
    else if (n<0.9) {
      this.textContent ='Eh';
    }
    else if (n<0.9) {
      this.textContent ='O';
    }
    else if (n<0.9) {
      this.textContent ='or';
    }
    else if (n<0.9) {
      this.textContent ='ki';
    }
    else if (n<0.9) {
      this.textContent ='ku';
    }
    else if (n<0.9 {
      this.textContent ='ke';
    } else {
      this.textContent ='this';
    }
  });
  btn.addEventListener ('mousedown', function () {
    this.className ='pushed';
  });
  btn.addEventListener ('mouseup', function () {
    this.className ='';
  });
}) ();
code
`` `html
<html>
<head>
<meta charset = "utf-8">
<title>Omikuji</title>
<link rel = "stylesheet" href = "style.css">
</head>
<body>
 push! 
<script src = random.js></script>
</body>
</html>Enter the language here
Code


I'm getting an error
As an image, I want to randomly put out a from a when I press push
random.js: 5 Uncaught TypeError: Cannot read property'addEventListener' of null
at random.js: 5
at Object ../app/javascript/random.js (random.js: 49)
atwebpack_require(bootstrap: 19)
at Object ../app/javascript/packs/application.js (application.js: 10)
atwebpack_require(bootstrap: 19)
at bootstrap: 83
at bootstrap: 83

  • Answer # 1

    Immediately after the if conditional expression immediately before the code that displays "ke")Is missing (a syntax error occurs)

    Math.randomIf you want to generate real values ​​in the range of 0 or more and less than 1 and display "a" to "ko" with the same probability, you need to change the conditional expression of the if statement in 0.1 increments.

    The error presented in the question does not occur in the presented HTML and JS files. In the base file, check if you made a mistake in writing the button ID, or if the script is loaded in the head.

    (function () {
        'use strict';
        var btn = document.getElementById ('btn');
        btn.addEventListener ('click', function () {
            var n = Math.random ();
            if (n<0.1) {
                this.textContent ='Ah';
            } else if (n<0.2) {
                this.textContent ='I';
            } else if (n<0.3) {
                this.textContent ='U';
            } else if (n<0.4) {
                this.textContent ='Eh';
            } else if (n<0.5) {
                this.textContent ='O';
            } else if (n<0.6) {
                this.textContent ='or';
            } else if (n<0.7) {
                this.textContent ='ki';
            } else if (n<0.8) {
                this.textContent ='ku';
            } else if (n<0.9) {
                this.textContent ='ke';
            } else {
                this.textContent ='this';
            }
        });
        btn.addEventListener ('mousedown', function () {
            this.className ='pushed';
        });
        btn.addEventListener ('mouseup', function () {
            this.className ='';
        });
    }) ();

  • Answer # 2

    Hello

    First of all, it is premised that the code in the question will be reviewed and corrected for the points pointed out in Mr. Daregada's answer so that it can be operated as intended, but as an application after that, as an applicationAhFromThisTo randomly get one character of one of the hiragana characters up to and set it as the text of the button, you can write as follows.

    const letters = [...'Aiue Okakikukeko'];
    btn.addEventListener ('click', function () {
      this.textContent = _.sample (letters);
    });

    Above_.sample (letters)The part of is an array using the method called _.sample of the library lodash, which is convenient when manipulating arrays and objects.lettersI get one randomly from the elements contained in.

    Sample for operation check:codepen.io/jun68ykt/pen/bGedBew

    I'm glad if you can use it as a reference.

    Postscript

    I have received your comments, but how about correcting the following two points?

    (1)・ ・ ・In

    Load lodash just below


    (2)lettersModify the line to create as follows

    --const letters = [...'Aiue Okakikukeko','Kakikukeko','What's Nune'];
    + const letters = [...'Aiue Okaki Kukeko', ...' Kaki Kukeko', ...' What's Nune'];

    That is, added'Kakikukeko'When"What's that?"Before each, the spread syntax...Is required. In this case, in the elements of letters,Or,Ki,Ku,Ke,ThisWill be included in pairs, so they will appear twice as likely as the other characters.