Alert-Enabled Random Number Generation Tool

Question

Alert-Enabled Random Number Generation Tool

I'm struggling to create a program that randomly generates a number between 1 and 20. If the number is less than 10, it should display "fail," and if it's greater than 10, it should display "success." I can't seem to figure out where I went wrong. Can someone please help me?

<!DOCTYPE html>
<html>
<body>

<p>Press the button to see a random number between 1 and 20.</p>

<button onclick="myFunction()">Generate Number</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x = Math.floor((Math.random() * 20) + 1);
    document.getElementById("demo").innerHTML = x;

    if (x < 10) 
{
    text = (x + “Success”);
}
    else 
{
    text = (x + “Fail”);
}
document.getElementById("demo").innerHTML = text;
}    
</script>

</body>
</html>

javascript html random numbers

Answer 1

Answer №1

It seems like you have made a mistake with the quotes and there are some scope issues in your code. Take a look at this CodePen snippet to identify and correct your errors.

var x=''; 
var myFunction= function () { 
    x = Math.floor((Math.random() * 20) + 1); 
    document.getElementById("demo").innerHTML = x; 

    if (x < 10) { 
        text = x + "Success"; 
    } else { 
        text = (x + "Fail"); 
    } 
    document.getElementById("demo").innerHTML = text; 
}

Answer 2

It seems like you have made a mistake with the quotes and there are some scope issues in your code. Take a look at this CodePen snippet to identify and correct your errors.

var x=''; 
var myFunction= function () { 
    x = Math.floor((Math.random() * 20) + 1); 
    document.getElementById("demo").innerHTML = x; 

    if (x < 10) { 
        text = x + "Success"; 
    } else { 
        text = (x + "Fail"); 
    } 
    document.getElementById("demo").innerHTML = text; 
}

Answer 3

Answer №2

Greetings! I noticed a few errors in your code.

All the code should be written within your function called myFunction(); this way, the scope of x will be limited to that function only.

You can easily implement this using jQuery. Take a look at the code snippet and JS Fiddle demo below:

 $(document).ready(function(){  
        $('#btnRoll').on('click',function(){
             var x = Math.floor((Math.random() * 20) + 1);
           var x = Math.floor((Math.random() * 20) + 1);       
           if(x<10)
             $('#demo').html(x+' fail');
           else
             $('#demo').html(x+' Success');
        });
    });

Check out the JsFiddle here

Thank you!

Answer 4

Greetings! I noticed a few errors in your code.

All the code should be written within your function called myFunction(); this way, the scope of x will be limited to that function only.

You can easily implement this using jQuery. Take a look at the code snippet and JS Fiddle demo below:

 $(document).ready(function(){  
        $('#btnRoll').on('click',function(){
             var x = Math.floor((Math.random() * 20) + 1);
           var x = Math.floor((Math.random() * 20) + 1);       
           if(x<10)
             $('#demo').html(x+' fail');
           else
             $('#demo').html(x+' Success');
        });
    });

Check out the JsFiddle here

Thank you!

Alert-Enabled Random Number Generation Tool

Answer №1

Answer №2

Similar questions

Merge web address when form is sent

transforming a div container into an inline element using CSS

The callback functions, such as afterMove, are not being executed

The script tags encountered an issue loading the resource with a status code of 404

Iterate through the JSON response and send it back to Jquery

Using AJAX to send a POST request with the PHP $_FILES superglobal while preventing the default form submission with the onclick

Checking whether a node stream operates in objectMode

Should Redux Reducer deep compare values or should it be done in the Component's ShouldComponentUpdate function?

Text in d3.js vanishing while undergoing rotation

How to position the navigation bar to the right using bootstrap

The benefits of using Node.js for asynchronous calls

Adaptable placement of background across screen widths

Toggle the state of a Material UI checkbox in ReactJS based on the data from hooks that return a true or checked value

Resolving the Enigma: Querying jQuery for Real-Time Validation and

Mastering the art of tab scrolling in VueJS using Bootstrap-vue

An error message 'module.js:557 throw err' appeared while executing npm command in the terminal

Arrow functions do not function properly with Typescript decorators

Ensuring Navigation Elements Remain Aligned in a Single Line

Refine JSON data by selecting only distinct key/value pairs

What is the best way to run tests on this asynchronous function using Jasmine?