So my HTML is:
<!DOCTYPE>
<head>
<script src="js/problem1.js"></script>
</head>
<body>
<input id="clickMe" type="button" value="Problem #1" onclick="problem1();" />
<script src="js/problem1.js"></script>
</body>
The script I am trying to run is:
var counter = 0
var total = 0
var start = prompt("Enter a number here to find the sum of all numbers that are:\n-Between 0 and your number\n-Divisible by 3 or 5")
function problem1(start) {
for (counter = 0; counter < start; counter++) {
if (counter < start) {
if (counter % 3 == 0) {
total += counter;
}
else if (counter % 5 == 0) {
total += counter;
}
}
else if (counter == start) {
if (counter % 3 == 0) {
total += counter;
alert(total);
}
else if (counter % 5 == 0) {
total += counter;
alert(total);
}
else {
alert(total);
}
}
}
}
The problem I am running into is that right now the script runs on page load and instantly gives me a prompt for creating the start variable. After entering an integer and clicking Ok the prompt window disappears and nothing happens. I do realize that the script is running on its own because it is called in the <head>. Problem is I don't know how else to call it, like on button click. I don't want to use JQuery. I have seen lots of answers like this one but I am looking for something that doesn't require JQuery. How would I accomplish this?
UPDATE
Thank you for the help. Now I have stumbled upon a second problem. I can't get the script to run or display the alert (not sure which)
put your prompt inside the problem function
function problem1() {
var counter = 0
var total = 0
var start = prompt("Enter a number here to find the sum of all numbers that are:\n-Between 0 and your number\n-Divisible by 3 or 5")
for (counter = 0; counter < start; counter++) {
if (counter < start) {
if (counter % 3 == 0) {
total += counter;
alert(total);
}
else if (counter % 5 == 0) {
total += counter;
alert(total);
}
}
else if (counter == start) {
if (counter % 3 == 0) {
total += counter;
alert(total);
}
else if (counter % 5 == 0) {
total += counter;
alert(total);
}
else {
alert(total);
}
}
}
}
<!DOCTYPE>
<head>
<script src="js/problem1.js"></script>
</head>
<body>
<input id="clickMe" type="button" value="Problem #1" onclick="problem1();" />
<script src="js/problem1.js"></script>
</body>
Related
For my collage assignment i need to create a html webpage where if you press the button yes it displays a number and a corresponding image. i have figured out how to create the random number but cannot get the corresponding image to show up when the button in pressed. i am very new to this and any help would be appreciated
This is the java script
function randomNumber() {
var ranNumgen = Math.floor((Math.random() * 6) + 1);
}
console.log("randomNumber");
if ("number" == 1) {
document.getElementById('img1').src = "image/dice1.jpg";
} else if ("number" == 2) {
document.getElementById('img1').src = "image/dice2.jpg";
} else if ("number" == 3) {
document.getElementById("img1").src = "image/dice3.jpg"
} else if ("number" == 4) {
document.getElementById("img1").src = "image/dice4.jpg";
} else if ("number" == 5) {
document.getElementById("img1").src = "image/dice5.jpg";
} else if ("number" == 6) {
document.getElementById("img1").src = "image/dice6.jpg";
}
<head>
<title></title>
<button id="b" onclick="ranNumgen()"> Yes </button>
<button onclick="Num2button()">No</button>
</head>
<body>
<p id="number"> </p>
And this is all my code
<!DOCTYPE html>
<html>
<head>
<title></title>
<button id="b" onclick="ranNumgen()"> Yes </button>
<button onclick="Num2button()">No</button>
</head>
<body>
<p id="number"> </p>
<script type="text/javascript">
function randomNumber() {
var ranNumgen = Math.floor((Math.random() *6) +1);
}
console.log("randomNumber");
if ("number" ==1 ) {
document.getElementById('img1').src ="image/dice1.jpg";
}
else if ("number" ==2) {
document.getElementById('img1').src ="image/dice2.jpg";
}
else if ("number"==3) {
document.getElementById("img1").src="image/dice3.jpg"
}
else if ("number"==4) {
document.getElementById("img1").src="image/dice4.jpg";
}
else if ("number"==5) {
document.getElementById("img1").src="image/dice5.jpg";
}
else if ("number"==6) {
document.getElementById("img1").src="image/dice6.jpg";
}
function Num2button() {
var button2 = "Are you sure"
alert(button2);
}
</script>
</body>
</html>
You can put your logic to assign the picture in your randomNumber function, the best would be to rename it to something like generateRandomPicture.
Then you need an element with the id you have specified and
also I would recommend that you use an eventListener instead of doing the inline scripting.
You can add .addEventListener() to your element.
document.getElementById('b').addEventListener('click', randomNumber);
document.getElementById('b').addEventListener('click', randomNumber);
function randomNumber() {
let number = Math.floor((Math.random() * 6) + 1);
if (number == 1) {
document.getElementById('img1').src = "image/dice1.jpg";
} else if (number == 2) {
document.getElementById('img1').src = "image/dice2.jpg";
} else if (number == 3) {
document.getElementById("img1").src = "image/dice3.jpg"
} else if (number == 4) {
document.getElementById("img1").src = "image/dice4.jpg";
} else if (number == 5) {
document.getElementById("img1").src = "image/dice5.jpg";
} else if (number == 6) {
document.getElementById("img1").src = "image/dice6.jpg";
}
}
<head>
<title></title>
</head>
<body>
<p id="number"> </p>
<img id="img1"></img>
<button id="b"> Yes </button>
<button onclick="Num2button()">No</button>
</body>
I'm aware that the question is already answered and that you are new to this but this is a more scalable approach and looks a bit cleaner.
NOTE: This snippet assumes the images in the array in the correct order, from 1 to N.
let images = [
'https://via.placeholder.com/10',
'https://via.placeholder.com/20',
'https://via.placeholder.com/30',
'https://via.placeholder.com/40',
'https://via.placeholder.com/50',
]
function setRandomImage() {
let index = Math.floor(Math.random() * images.length);
document.getElementById('img').src = images[index];
document.getElementById('num').innerHTML = index + 1;
}
<img id="img"></img>
<p id="num"></p>
<button onclick="setRandomImage()">Yes</button>
<button>No</button>
As per epascarello's comment, this does not rely on the order of the images but they do have to be in the array.
var images = [
'https://via.placeholder.com',
'https://via.placeholder.com',
'https://via.placeholder.com',
'https://via.placeholder.com',
'https://via.placeholder.com',
]
function setRandomImage() {
let index = Math.floor(Math.random() * images.length) + 1;
document.getElementById('img').src = images[index - 1] + '/' + index + '0';
document.getElementById('num').innerHTML = index;
}
<img id="img"></img>
<p id="num"></p>
<button onclick="setRandomImage()">Yes</button>
<button>No</button>
And if you always have a static number of images which are properly named you can even do away with the images array.
function setRandomImage() {
let rand = Math.floor(Math.random() * 6) + 1;
document.getElementById('img').src = 'https://via.placeholder.com/' + rand + '0';
document.getElementById('num').innerHTML = rand;
}
<img id="img"></img>
<p id="num"></p>
<button onclick="setRandomImage()">Yes</button>
<button>No</button>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I've created a FizzBuzz Program and now I just want to display that in a div when a button is clicked.
I've created a function which will show the div when the button is clicked. (fizzbuzzButton)
All I want it to do is display the result of the FizzBuzz Function in the Div.
Is there not a simple way to display the result of a function in a div?
Or despite that, show the result of a function after clicking a button?
I can get it to display when clicking a button using:
<button onclick="FizzBuzz()">Show FizzBuzz</button>
But when using document.write, this removes the rest of the HTML.
<!DocType html>
<html>
<body>
<script type= text/javascript>
var max = 100;
var fizz = "Fizz!";
var buzz = "Buzz!";
var fizzbuzz = "FizzBuzz!";
function FizzBuzz() {
for(var x = (1); x <= max; x++) {
if(x % 5 == 0 && x % 3 == 0){
document.write(fizzbuzz, "</br>" )
}
else if(x % 3 == 0) {
document.write(fizz, "</br>")
}
else if(x % 5 == 0) {
document.write(buzz, "</br>")
}
else {
document.write(x, "</br>")
}
}
}
function fizzbuzzButton() {
document.getElementById('resultDIV').innerHTML = FizzBuzz;
}
</script>
<h1>FIZZ BUZZ!</h1>
<button onclick="fizzbuzzButton()">Show FizzBuzz</button>
<div id="resultDIV">
</div>
</body>
</html>
Two significant problems:
Avoid document.write in general; it's only useful during initial page render (which in modern workflows is basically never). Instead have your function concatenate its output into a string, and return that string; put content into the DOM using e.g. innerHTML instead of document.write.
document.getElementById('resultDIV').innerHTML = FizzBuzz will fill the div with the function itself. You want to call the function and get its output, so use FizzBuzz() instead.
var max = 100;
var fizz = "Fizz!";
var buzz = "Buzz!";
var fizzbuzz = "FizzBuzz!";
function FizzBuzz() {
var output = "";
for (var x = (1); x <= max; x++) {
if (x % 5 == 0 && x % 3 == 0) {
output += fizzbuzz + "<br>"
} else if (x % 3 == 0) {
output += fizz + "<br>"
} else if (x % 5 == 0) {
output += buzz + "<br>"
} else {
output += x + "<br>"
}
}
return output;
}
function fizzbuzzButton() {
document.getElementById('resultDIV').innerHTML = FizzBuzz();
}
<h1>FIZZ BUZZ!</h1>
<button onclick="fizzbuzzButton()">Show FizzBuzz</button>
<div id="resultDIV">
</div>
(A less significant issue also changed above: </br> is harmless but incorrect, use <br> instead.)
i found issue in your code and fixed for you, created one jsfiddle, have a look
This will help you
https://jsfiddle.net/wnx50hfr/
<!DocType html>
<html>
<body>
<script type= text/javascript>
var max = 100;
var fizz = "Fizz!";
var buzz = "Buzz!";
var fizzbuzz = "FizzBuzz!";
function FizzBuzz() {
for(var x = (1); x <= max; x++) {
if(x % 5 == 0 && x % 3 == 0){
document.write(fizzbuzz, "</br>" )
}
else if(x % 3 == 0) {
document.write(fizz, "</br>")
}
else if(x % 5 == 0) {
document.write(buzz, "</br>")
}
else {
document.write(x, "</br>")
}
}
}
function fizzbuzzButton() {
document.getElementById('resultDIV').innerHTML = FizzBuzz;
}
</script>
<h1>FIZZ BUZZ!</h1>
<button onClick="fizzbuzzButton()">Show FizzBuzz</button>
<div id="resultDIV">
</div>
</body>
</html>
Only function fuzzbuzzButton is declared, and there is no fizzbuzzButton function.
If you want to run the function, you should use FizzBuzz() and not FizzBuzz.
Replace the function with
function fizzbuzzButton() {
document.getElementById('resultDIV').innerHTML = FizzBuzz;
}
If you want to write to the div with id 'resultDIV' through your approach, you should rather get the result as a string, and assign it to document.getElementById('resultDIV').innerHTML.
I've tried many times but can not figure out how to get this full script to run on click it will not work. Need answer to change after the value of the input has been changed.
<input id="a" value="500" type="number">
<p id="b"></p>
<script>
var bills = [100, 250, 450, 950, 1150];
var money = mod(document.getElementById("a").value);
function mod(num){
if (num % 5 === 0){
return num;
} else {
return num + 5 - num % 5
}
}
function foo(num){
var index = bills.length - 1;
var splits = [];
while (money >= bills[0]){
if (money >= bills[index]){
money -= bills[index];
splits.push(bills[index]);
} else {
index--;
}
}
return splits;
}
document.getElementById("b").innerHTML = foo(money) </script>
What I'm trying to do is make a simple guessing game where the user can any the number without limit but will be graded at the end when the guessed the number correctly based on the number of their guesses. However, with my code when I enter a number and press the button to multiple times the hint changes from "Higher" to "Lower" even if the number is not changed also the message that should be displayed when the number is guessed correctly is not showing. Here's my code, I'm a beginner so there's bound to be errors in the code and any help is appreciated.
<fieldset>
<input type="number" id="guess" />
<button onClick="checknum();">Check Number</button>
</fieldset>
<fieldset>
<p>Your current status:</p>
<output id="status_output">You have yet to guess anything.</output>
</fieldset>
<script type="text/javascript">
function checknum(){
var randomNumber = Math.floor((Math.random() * 100) + 1);
var guessNumber = document.getElementById("guess").value;
//var guessNumber = parseInt(guess.value);
var statusOutput = document.getElementById('status_output');
var counter = 0;
var isguessed = false;
do {
counter = (counter + 1)
if (guessNumber < randomNumber) {
statusOutput.value = ("Higher");
}
else if (guessNumber > randomNumber) {
statusOutput.value = ("Lower");
}
else if (guessNumber = randomNumber) {
set (isguessed = true());
statusOutput.value = ("Correct" + mark());
}
}
while (isguessed = false);
}
function mark(){
if (counter < 10){
statusOutput.value("Excellent");
}
else if (counter > 10 && counter <20){
statusOutput.value("Okay");
}
else
statusOutput.value("Needs Practice");
}
</script>
In your while you are assigning false to the variable named isguessed.
You want to do while (isguessed === false) instead. This will check if isguessed is set to false
isguessed = false : assigns the varibles isguessed to false
isguessed === false : a boolean expression return true or false
I'm trying to make a game that displays a sequence of images depending on the number the user puts in a input box. I want it to show a random image from an array of my images for however many times the user set it to show it.
Here's my JavaScript:
var numLeaves = 0;
var numSeq = ["1.jpg","2.png","3.jpg","4.jpg","5.png","6.jpg","7.jpg","8.jpg","9.jpg","0.jpg"];
function startGame() {
while (1 < 10) {
randomNum = Math.floor((Math.random() * numSeq.length));
if (randomNum === 0) {
numLeaves = 1;
} else if (randomNum == 1) {
numLeaves = 2;
} else if (randomNum == 2) {
numLeaves = 3;
} else if (randomNum == 3) {
numLeaves = 4;
} else if (randomNum == 4) {
numLeaves = 5;
} else if (randomNum == 5) {
numLeaves = 6;
} else if (randomNum == 6) {
numLeaves = 7;
} else if (randomNum == 7) {
numLeaves = 8;
} else if (randomNum == 8) {
numLeaves = 9;
} else if (randomNum == 9) {
numLeaves = 0;
}
document.getElementById("picture").src = numSeq[randomNum];
setInterval(function(){document.getElementById("picture").src = ""}, 1500);
i++;
}
}
function submitInput() {
if (document.getElementById("leaveGuess").value == numLeaves) {
document.getElementById("result").innerHTML = "Correct!";
}
else
{
document.getElementById("result").innerHTML = "Incorrect... There were " + numLeaves + " leaves on the shamrock";
}
}
And here's my HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="rep.css">
<script type="text/javascript" src="rep.js"></script>
</head>
<body>
<div id="test"></div>
<div id="content">
<div id="title" class="center">
<h1>Repetitive</h1>
<p>Created by Daniel Hancock</p>
<h2>Instructions:</h2>
<p>In under one second memorize the amount of leaves on the shamrock. <br> After one second, you will be asked to enter the number of leaves that you saw on the shamrock.</p>
<label for="numSequence"><strong>Length:</strong></label>
<input id="numSequence"> <br>
<button onclick="startGame()" id="startButton">New</button>
</div>
<div id="display" class="center">
<img src="" id="picture" width="215" height="215">
<div id="guessing" class="center">
<input id="leaveGuess">
<button onclick="submitInput()">Submit</button>
<p id="result"></p>
</div>
</div>
</div>
</body>
</html>
Explain it to me like I'm a five year old.
I didn't understand your problem but i found some problems in the code:
1) you didn't declare the numLeaves as global variable (maybe) and you update him 10 times in the while without use him.
2) set var i = 0; at the start of startGame function or the better solution is using for instead while
3) why you did randomNum === 0 instead randomNum == 0?
tip:
you can write
numLeaves = (randomNum + 1) % 10;
instead of the 10 if commands
I can see one major problem here - you have not declared i anywhere. In your while loop you have the condition set to (1 < 10) which will always be true.
I would recommend changing it to use a for loop like this:
for (int i=0; i<10; i++)
{
randomNum = Math.floor((Math.random() * numSeq.length));
if (randomNum == 9)
{
numLeaves = 0;
}
else
{
numLeaves = randomNum + 1;
}
document.getElementById("picture").src = numSeq[randomNum];
setInterval(function(){document.getElementById("picture").src = ""}, 1500);
}
Hope this helps.