I seem to have everything I need for the what I am trying to do. However, I can't seem to get it display how I want it to display.
<!DOCTYPE HTML>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>5 Times Table</title>
<script type="text/javascript">
/* Program to print the five times table from 1 to 12 in this format:
5 x 1 = 5
5 x 2 = 10
5 x ...
Input: There will be no user input, program will use a loop to create the 5 times table.
Process: Define all the 5 times table between 1 and 12.
Output: The 5 times table will be displayed.
*/
function fiveTimesTable() {
var result = 0;
for (i=1; i<=12; i++){
result = "5 * " + i + result + i*5 + "<br>";
var display =result;
}
document.getElementById("outputDiv").innerHTML = display;
}
</script>
</head>
<body>
<h1>Five Times Table From 1 - 12.</h1>
<h2>Press the button to display the table.</h2>
<button type="button" onclick="fiveTimesTable()">Times Table</button>
<div id="outputDiv"></div>
</body>
</html>
`
Your code was close, but it'll be easier to understand if you break it up into its parts.
function fiveTimesTable() {
var display = ""; // The table output HTML
for (i = 1; i <= 12; i++) {
var multiplier = 5;
var result = i*5;
display += multiplier+" * "+i+" = "+result+"<br>"; //Add each line to our output HTML
}
document.getElementById("outputDiv").innerHTML = display;
}
Check it out in this codepen.
Some challenges going forward, if you're interested.
Make your function able to display the table for any multiplier using parameters.
Put your table into an actual HTML table element.
<!DOCTYPE HTML>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Tabla del 5</title>
<script>`enter code here`
/* Program to print the five times table from 1 to 12
Input: The program will use a loop to create the 5 times table.
Process: Write a defining table and a program to display the five times tables
Output: display the five times table from 1 to 12 in this format*/
function FiveTimesTable() {
var display = "";
for (i = 1; i <= 12; i++) {
var multiplier = 5;
var result = 5*i;
display += multiplier+" * "+i+" = "+result+"<br>"+"<br>";
}
document.getElementById("outputDiv").innerHTML = display;
}
</script>
</head>
<body>
<h2>Five Times Table</h2>
<h3>Press the button to display the 5 times table</h3>
<button type="button" onclick="FiveTimesTable()">Times Table</button>
<div id="outputDiv"></div>
</body>
</html>
Related
I'm trying to create a working time clock that allows me to input the number of hours I study everyday and get the total. Am I using parseInt wrong?
<html>
<head>
<title>Time clock</title>
<meta charset="utf-8">
</head>
<body>
<h1 id="header">Time clock</h1>
<p id="greeting"></p>
<input type="text" id="inp"/>
<button onclick="sumit()">Click</button>
<p id="hours"></p>
<script>
greeting.innerHTML = 'How many hours have you studied?'
function sumit(){
let text = parseInt(document.getElementById("inp").value);
let hours = (document.getElementById("hours"));
let total = 0
for (i = 0; i < 10; i++){
total += parseInt(text[i]);
hours.innerHTML = `You have studied a total of ${text + total} hours.`
}
console.log(total)
console.log(text)
}
</script>
</body>
</html>
The text variable is already defined and assigned the value of parseInt. So your total += parseInt(text[i]) is trying to index a number type (e.g. total += 123[0]) which isn't possible. Instead, you can just do total += text, or you can remove the parseInt call when you declare text and then do total += parseInt(text).
With minimal changes, this should work:
function sumit() {
let text = parseInt(document.getElementById("inp").value) || 0;
let hours = document.getElementById("hours");
let total = 0;
total += text;
hours.innerHTML = `You have studied a total of ${total} hours.`;
}
Explanation
parseInt can return NaN, so we use the || operator to let it default to 0
You don't need to loop over anything to sum the number
Even if you were looping over anything, you don't use reference indexes on numbers like you tried to do with text[i]
You don't need to add total to text multiple times
I know this may seem like a simple question but I'm stumped. I'm supposed to create a times table using increments of 12. While I can use any method, I'm attempting to use a for loop. The formula works just fine, it multiplies 'number' by 12, but I need to put, for instance, 12 * 1 = 12, rather than 12 * = 12 which is what I have now. Is there anything that I can do to improve upon this?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script>
var number = 0;
i = 0
for (number; number <=12; number++) {
document.write("12 * " + number * 12 + "</br>");
i++;
}
</script>
</body>
</html>
I think this may be what you're trying to accomplish, which involves ensuring you output the value of your iterating variable (number in this case).
var number = 0;
for (number; number <=12; number++) {
document.write("12 * " + number + " = " + number * 12 + "</br>");
}
I was having some difficulties setting up a grid using nested if statements. It's a relatively simple task but I seem to be stuck!
This is a school assignment. The instructions are below:
"If the user enters 8 in the text input and clicks the button, you should draw eight rows and columns of little squares. To do this, you will need two for loops nested inside each other like this:
for ( row=1; ... ) {
for ( col=1; ... ) {
...
}
}
In the (inner-most) loop body, draw a little square on the paper with an x and y value calculated from the loop counters so the squares end up in a grid pattern.
Your page will look something like this (depending on the number the user enters, obviously). Don't worry about the coloured boxes yet: that is the next part."
The outcome should look something like this:
image
You can ignore the fact that some of squares are colored. So far I'm come up with this:
generate = function() {
n = 0
x = 0
y = 0
n = $('#squares').val()
for (row = 1; row <= n; row += 1) {
for (col = 1; col <= n; col += 1) {
r = paper.rect(x, y, 10,10)
x = x + 20
}
y = y + 20
}
}
setup = function() {
paper = Raphael('container', 400, 400)
$('#number').click(generate)
}
jQuery(document).ready(setup)
Thank you in advance!
The starting value for the rows and column in the for loops can be set with the start variable 0 and the condition check row < n.
Here is an example using javascript and canvas without an external library.
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<label>Grid size:</label>
<input type="number" name="go" type="text" name="" id="">
<button class="button">go</button>
<canvas id="canvas" width="400" height="400"></canvas>
</body>
</html>
js:
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
document.getElementsByClassName('button')[0].onclick = function() {
var value = document.querySelector('input[name="go"]').value;
ctx.clearRect(0, 0, canvas.width, canvas.height);
var space = 400 / (value);
for (row = 0; row < value; row += 1) {
for (col = 0; col < value; col += 1) {
ctx.fillRect(row * space, col * space, space - 10, space - 10)
}
}
}
I need to write a program that finds the middle of an array and returns the value stored there unless the array is even then it should return the average of the two middle most numbers. Here is the code i have so far. i'm stuck on how i would find the middle two numbers in an even array and return the average. I'm a super beginner in java script so all help is appreciated. Thanks!
<!DOCTYPE HTML>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Add Ends</title>
<script language="javascript" type="text/javascript">
/*
Write a function named getMiddle that returns the value of the middle element in an array. If the array has an even number of elements, then this function must return the average of the two middle elements.
*/
var testNumbers = [0, 1 ,2, 3, 4, 5, 6, 7, 8, 9]
function isEven()
{
var mid = (testNumbers[0] + (testNumbers.length)) / 2;
}
function getMiddle(list)
{
var mid = (testNumbers[0] + (testNumbers.length)) / 2;
if (mid % 2 == 0)
{
var evenMid = isEven();
document.getElementById("outputDiv1").innerHTML = evenMid;
}
else
{
document.getElementById("outputDiv1").innerHTML = mid;
}
}
</script>
</head>
<body>
<button type="button" onclick="binarySearch()">Find the Middle</button>
<br>
<div id="outputDiv1"></div>
</body>
</html>
This should get you somewhere (from this SO answer):
if (nums.length %2 == 0) {
// even-length array (two middle elements)
var avg = (nums[(nums.length/2) - 1] + nums[nums.length/2]) /2;
}
Try the following:
/*
Write a function named getMiddle that returns the value of the middle element in an array. If the array has an even number of elements, then this function must return the average of the two middle elements.
*/
var testNumbers = [0, 1 ,2, 3, 4, 5, 6, 7, 8, 9]
function output(){
var mid = getMiddle(JSON.parse(document.getElementById("lst").value));
outputDiv1.innerHTML = mid;
}
function getMiddle(list)
{
if(list.length % 2 == 1){
return list[(list.length-1)/2];
}else{
return (list[(list.length/2)]+list[(list.length/2 -1)])/2
}
}
<!DOCTYPE HTML>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Add Ends</title>
</head>
<body>
<input id="lst">
<button type="button" onclick="output()">Find the Middle</button>
<br>
<div id="outputDiv1"></div>
</body>
</html>
var idx = (testNumbers.length-1) / 2;
document.getElementById('outputDiv1').textContent =
( testNumbers[Math.floor(idx)] + testNumbers[Math.ceil(idx)] )/2;
I am trying to create an application that has a die, singular for dice, on the screen. When you click the die, it will roll and display a number. I also want to keep a running total of each roll.
So far I have it to where each time the button is clicked, the image randomly changes. I'm confused about how to keep a running total of the rolls, however.
Here is the code I have so far.
<html>
<head>
</head>
<body>
<script>
function displaydie() {
var total = 0;
var num = ("src",(Math.floor(Math.random()*6)+1) + ".jpg")
document.getElementById("die").setAttribute("src", (Math.floor(Math.random()*6)+1) + ".jpg")
}
</script>
<img id="die" alt="die"/>
<br/>
<input type="button" value="Click me!" onclick="displaydie()"/>
<span id="total"/></span>
</body>
</html>
Use a global variable to store the total value then add the value of the current dice to the total. For that you need to store the value of the current dice in a variable and use it for the image and to add.
var total = 0;
function displaydie() {
var num = (Math.floor(Math.random() * 6) + 1);
total += num;
document.getElementById("die").setAttribute("src", num + ".jpg")
document.getElementById("total").innerHTML = total;
}
Demo: Fiddle
You want to create a dictionary, and on each roll, add to the number of times you have rolled that number:
var rolls = {1:0, 2:0, 3:0, 4:0, 5:0, 6:0}
var total=0;
function displaydie()
{
var num= Math.floor(Math.random()*6)+1
rolls[num]+=1
total+=1
document.getElementById("die").setAttribute("src",num + ".jpg")
document.getElementById("total").innerHTML = "Total rolls: "+total+"\n"+"1: "+rolls[1]+" 2: "+rolls[2]+" 3: "+rolls[3]+" 4: "+rolls[4]+" 5: "+rolls[5]+" 6: "+rolls[5]
}
DEMO