I am still new to javascript and HTML. My task is to generate 2 random integer values from 1 to 3. Upon pressing the "Match!" button, an alert box informs the user if the two numbers are the same or not the same. Not sure why my code isn't working. Any help is appreciated.
Demo: https://jsfiddle.net/1rp5xvte/5/#&togetherjs=pJcEH56yoK
$(document).ready(function(){
function myFunction()
{
document.getElementById("generatedNum").innerHTML = Math.random();
{
if (generateNum1 == generateNum2) {
alert ("Both numbers are the same");
}
else {
alert("Both numbers are different");
}
displayGeneratedNum ();
}
}
});
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lab Report</title>
<script src="jquery.js"></script>
<script src="myScript.js"></script>
<style>
body{font-size:40px;
text-align:center;
background-color: antiquewhite;}
table {margin-top:100px;
background-color:white;}
td { width:150px;}
span {font-size:40px;}
#correctScore{
background-color:green;
}
#wrongScore{
background-color:red;
}
#missedScore{
background-color:blueviolet;
}
.numberStyle {
padding: 10px 10px 10px 10px;
color:blue;
}
.numberStyle span {
font-size:100px;
}
</style>
</head>
<body>
<table width="800" border="1" align="center">
<tr>
<td id="generatedNum" colspan="6" align="left"><span>Random Numbers
generated : 1</span></td>
</tr>
<tr>
<td colspan="3" align="center">Number 1</td>
<td colspan="3" align="center">Number 2</td>
</tr>
<tr>
<td colspan="3" id="number1" class="numberStyle"><span>1</span></td>
<td colspan="3" id="number2" class="numberStyle"><span>2</span></td>
</tr>
<tr height="50px";>
<td colspan="6"><input type="button" value="MATCH!" style="font-size:50px;">
</input></td>
</tr>
<tr>
<td>Correct:</td>
<td id="correctScore"><span>0<span></td>
<td><span>Wrong<span></td>
<td id="wrongScore"><span>0<span></td>
<td><span>Missed<span></td>
<td id="missedScore"><span>0<span></td>
</tr>
</table>
</body>
</html>
try this code
<html><body><label id='lbl'></label><button id="btn">Match!</button><script src="https://code.jquery.com/jquery-2.2.1.min.js"></script><script>
function randomNumber(a,b)
{
if(b == undefined) {
b = a - 1;
a = 0;
}
var delta = b - a + 1;
return Math.floor(Math.random()*delta) + a
}
$(document).ready(function(){
$('#btn').click(function()
{
var generateNum1 = randomNumber(1,3);
var generateNum2 = randomNumber(1,3);
if (generateNum1 == generateNum2) {
alert ("Both numbers are the same");
}
else {
alert("Both numbers are different");
}
$('#lbl').html(generateNum1 + ";" + generateNum2);
})
});
</script></body></html>
You need a function that generated a random integer within a range.
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
button.addEventListener('click', function() {
var num1 = getRandomInt(1, 3);
var num2 = getRandomInt(1, 3);
alert(num1 === num2 ? 'Both numbers are the same' : 'Both numbers are different');
});
JSFiddle Demo: https://jsfiddle.net/1rp5xvte/1/
Related
My script works ok but at times the results are like 100.6456489764 but i want to instead show like 100.64 or just 100 but i do not get how to fix this here is my bit of code
would appreciate your kind help and input in this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en-CA" lang="en-CA" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="Javascript">
function dosum()
{
var TD = document.temps.OD.value /document.temps.PV.value *100;
var MLTV = document.temps.MA.value /document.temps.PV.value *100
document.temps.LTV.value = TD + MLTV
}
</script>
<script type="text/javascript" language="javascript">
function display_amount(amount)
{
var currency = '$';
if(isNumeric(amount))
{
if(amount < 0)
return '-' + currency + Math.abs(Math.round(amount,2));
else
return currency + Math.round(amount, 2);
}
else
return amount;
}
</script>
<title>LTV</title>
</head>
<body>
<FORM NAME="temps">
<TABLE bgcolor="#CCCCCC" cellspacing="0" cellpadding="10" width="350">
<TR><TD WIDTH=153 bgcolor="blue">
<font color="yellow"><b>Property Value:</b></font></TD>
<TD WIDTH=153 bgcolor="#0fcf00">
<p style="margin-top: 0; margin-bottom: 0">
$<INPUT TYPE="TEXT" NAME="PV" onChange="dosum()" SIZE="8" VALUE=""></p></TD></TR>
<TR><TD WIDTH=153 bgcolor="green">
<font color="white"><b>Mortgage Balance:</b></font></TD>
<TD WIDTH=153 bgcolor="red">
$<INPUT NAME="MA" onChange="dosum()" SIZE="8" VALUE=""></TD></TR>
<TR><TD WIDTH=153 bgcolor="#ddd000">
<font color="green"><b>Additional Debts:</b></font></TD>
<TD WIDTH=153 bgcolor="orange">
$<INPUT NAME="OD" onChange="dosum()" SIZE="8" VALUE=""></TD></TR>
<TR><TD WIDTH=153 bgcolor="#333000"> <b><font color="#ffffff">
<INPUT TYPE="NUMBER" NAME="LTV" SIZE="10" readonly>%</font></b></TD>
<TD WIDTH=153 bgcolor="#333000">
<INPUT TYPE="submit" VALUE="Calculate"></div></TD>
</TR>
</TABLE>
</FORM>
</body>
</html>
thanks in advance
Use .toFixed(2) to round the value to 2 digits.
function dosum() {
var TD = document.temps.OD.value / document.temps.PV.value * 100;
var MLTV = document.temps.MA.value / document.temps.PV.value * 100
document.temps.LTV.value = (TD + MLTV).toFixed(2);
}
Use
Math.round(num * 100) / 100
Or something like this
var discount = (price / listprice).toFixed(2);
For 2 digits precision use toFixed()
function dosum()
{
var TD = document.temps.OD.value /document.temps.PV.value *100;
var MLTV = document.temps.MA.value /document.temps.PV.value *100
document.temps.LTV.value = (TD + MLTV).toFixed(2);
}
I'm trying to find a way to calculate the data that was entered into an array.
The JavaScript
function getInput()
{
var even = [];
var odd = [];
var num = prompt("Enter your number");
if (num % 2 === 0) {
alert("Data entered into array.");
even.push(num);
}
else if (num % 2 == 1) {
alert("Data entered into array.");
odd.push(num)
}
else {
alert("Invalid input.");
}
}
function finished() //This is where the calculations are done. It's accessed by a button in my HTML.
{
var sum = document.getElementById("leftSumOutput").innerHTML = even[];
}
This is the structure for the page. I'm trying to use tables to store the outputs.
The HTML
<!DOCTYPE html>
<html>
<head>
<title>Sample Title</title>
<script type="text/javascript" src="assignmentOne.js"></script>
<link rel="stylesheet" type="text/css" href="assignmentOne.css">
<link rel="icon" href="favicon.png" type="image/x-icon" />
</head>
<body>
<div align=center>
<h1>Welcome to Assignment One!</h1>
<label for="input">Click for each time you would like to make an input ==></label>
<button id="input" onclick="getInput()"><b>Click to input data</b></button><br><br>
<button id="done" onclick="finished()">Click here when done</button>
<!--<h1 id="even">Even</h1>
<h1 id="odd">Odd</h1>
<p id="left"></p>
<p id="right"></p>
<p id="leftResult"></p>
<p id="rightResult"></p>-->
<table>
<tr>
<th></th>
<th>Even</th>
<th>Odd</th>
</tr>
<tr>
<td></td>
<td id="even"></td>
<td id="odd"></td>
</tr>
<tr colspan="2">
<td>Sum</td>
<td id="leftSumOutput"></td>
<td id="rightSumOutput"></td>
</tr>
<tr colspan="2">
<td>Average</td>
<td id="leftAvgOutput"></td>
<td id="rightAvgOutput"></td>
</tr>
</table>
</div>
</body>
</html>
I want to calculate the items within the array. I'm a novice, so I apologize in advance.
EDIT: I forgot to mention that I don't know how to calculate the averages of the fields either. Any help with that would be appreciated. Thanks everyone for your assistance so far!
I think you are little bit confused with scoping of variables.
Here is an example of how it could've been done:
(function(w, d) {
var odds = [], evens = [], button, elSumOdds,elSumEvens, elAvgOdds, elAvgEvens, s
w.addEventListener('load', function() {
button = d.querySelector('button')
elSumOdds = d.querySelector('#sum-odds')
elSumEvens = d.querySelector('#sum-evens')
elAvgOdds = d.querySelector('#avg-odds')
elAvgEvens = d.querySelector('#avg-evens')
button.addEventListener('click', calculate)
})
function calculate() {
var i = prompt('enter number') | 0;
if ((i|0)%2) {
odds.push(i)
s = odds.reduce(function(a,n) { return a+n }, 0)
elSumOdds.innerText = s
elAvgOdds.innerText = s / odds.length
} else {
evens.push(i)
s = evens.reduce(function(a,n) { return a+n }, 0)
elSumEvens.innerText = s
elAvgEvens.innerText = s / evens.length
}
}
})(window, document)
<button > calculate</button>
<table>
<tr><td></td><td>Sum</td><td>Avg</td></tr>
<tr><td>Odds</td><td id='sum-odds'></td><td id='avg-odds'></td></tr>
<tr><td>Evens</td><td id='sum-evens'></td><td id='avg-evens'></td></tr>
</table>
If you need to calculate sum of each element in array you need to write map function. Visit link: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/map
if you just need to know amount of elements, call: alert(even.length);
Note: #vittore 's structure inspired this change.
(function(d) {
d.getElementById('input').addEventListener('click', getInput);
d.getElementById('done').addEventListener('click', finished);
var elSumOdd = d.getElementById('oddSumOutput');
var elSumEven = d.getElementById('evenSumOutput');
var elAvgOdd = d.getElementById('oddAvgOutput');
var elAvgEven = d.getElementById('evenAvgOutput');
var even = [];
var odd = [];
function getInput() {
var num = prompt("Enter your number") | 0;
if (num % 2 == 0) {
even.push(num);
} else if (num % 2 == 1) {
odd.push(num);
} else {
alert("Invalid input.");
}
finished();
}
function finished() { //This is where the calculations are done. It's accessed by a button in my HTML.
elSumOdd.innerHTML = odd.reduce(function(a, b) {
return a + b;
}, 0);
elSumEven.innerHTML = even.reduce(function(a, b) {
return a + b;
}, 0);
elAvgOdd.innerHTML = elSumOdd.innerHTML / odd.length || 0;
elAvgEven.innerHTML = elSumEven.innerHTML / even.length || 0;
}
})(document);
<div align=center>
<h1>Welcome to Assignment One!</h1>
<label for="input">Click for each time you would like to make an input ==></label>
<button id="input"><b>Click to input data</b>
</button>
<br>
<br>
<button id="done">Click here when done</button>
<!--<h1 id="even">Even</h1>
<h1 id="odd">Odd</h1>
<p id="left"></p>
<p id="right"></p>
<p id="leftResult"></p>
<p id="rightResult"></p>-->
<table>
<tr>
<th></th>
<th>Even</th>
<th>Odd</th>
</tr>
<tr>
<td></td>
<td id="even"></td>
<td id="odd"></td>
</tr>
<tr colspan="2">
<td>Sum</td>
<td id="evenSumOutput"></td>
<td id="oddSumOutput"></td>
</tr>
<tr colspan="2">
<td>Average</td>
<td id="evenAvgOutput"></td>
<td id="oddAvgOutput"></td>
</tr>
</table>
</div>
First I would like to say thank you to the individuals that helped me with this question before. For the ones that decided to close my post without even trying to first assist me, please refrain from closing my post if you are not deciding to help and calling my issue too broad. Also, I'm not looking as of this time to "optimize" my code or for corrections with how I expatiate my summary below. Now, for the real issue...
I'm trying my hand at building a tic-tac-toe game with plain vanilla Javascript, so I'm hoping we can stay in the boundaries of keeping it simple Javascript. Do not optimize code!
What I require is the following: I need code that will check each square to see if it's filled with an X or an O. If squares are still available, no need for an alert but if all squares are filled, I need it to alert me "No more moves!"
I have started the function checkEmpty
Thank you for your assistance and time!
Here is the code I have got so far:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tic Tac Toe</title>
<style>
td {
border: 1px solid black;
height: 250px;
width: 250px;
font-family: sans-serif;
font-size: 150pt;
text-transform: uppercase;
}
</style>
</head>
<body>
<table>
<tr>
<td align="center" id="square1" onclick="displayMarker('square1');"></td>
<td align="center" id="square2" onclick="displayMarker('square2');"></td>
<td align="center" id="square3" onclick="displayMarker('square3');"></td>
</tr>
<tr>
<td align="center" id="square4" onclick="displayMarker('square4');"></td>
<td align="center" id="square5" onclick="displayMarker('square5');"></td>
<td align="center" id="square6" onclick="displayMarker('square6');"></td>
</tr>
<tr>
<td align="center" id="square7" onclick="displayMarker('square7');"></td>
<td align="center" id="square8" onclick="displayMarker('square8');"></td>
<td align="center" id="square9" onclick="displayMarker('square9');"></td>
</tr>
</table>
<script>
var cp1 = 1;
function displayMarker(allSquares) {
if (document.getElementById(allSquares).innerHTML != "") {
alert("Choose another square");
}
else {
if (cp1 == 1) {
document.getElementById(allSquares).innerHTML = "X";
cp1 = 2;
}
else {
document.getElementById(allSquares).innerHTML = "O";
cp1 = 1;
}
}
checkEmpty();
}
function checkEmpty() {
for (var i = 1; i <= 9; i++) {
console.log(document.getElementById('square' + i).innerHTML + " square" + i);
}
</script>
</body>
</html>
Should work:
function checkEmpty() {
for (var i = 1; i <= 9; i++) {
if (!document.getElementById('square' + i).innerHTML) return;
}
alert("all squares filled");
}
function checkEmpty() {
var isEmpty = false;
for (var i = 1; i <= 9; i++) {
var squareVal = document.getElementById('square' + i).innerHTML;
if(squareVal.length == 0)
{
isEmpty = true;
break;
}
}
if(!isEmpty)
{
alert('No more moves');
}
}
Sorry if this is really obvious. I am pretty new to JavaScript. I have had to create a basic X game . Here is the HTML code.
<table border="1" cellpadding="5">
<tbody>
<tr>
<td id="cell1"></td>
<td id="cell2"></td>
<td id="cell3"></td>
</tr>
<tr>
<td id="cell4"></td>
<td id="cell5"></td>
<td id="cell6"></td>
</tr>
<tr>
<td id="cell7"></td>
<td id="cell8"></td>
<td id="cell9"></td>
</tr>
</tbody>
</table>
I had to write a code so that clicking on any cell, would make an X appear on the cell.
function click() {
if (this.id == "cell1") {
document.getElementById("cell1").innerHTML = "X";
} else if (this.id == "cell2") {
document.getElementById("cell2").innerHTML = "X";
} else if (this.id == "cell3") {
document.getElementById("cell3").innerHTML = "X";
} else if (this.id == "cell4") {
document.getElementById("cell4").innerHTML = "X";
} else if (this.id == "cell5") {
document.getElementById("cell5").innerHTML = "X";
} else if (this.id == "cell6") {
document.getElementById("cell6").innerHTML = "X";
} else if (this.id == "cell7") {
document.getElementById("cell7").innerHTML = "X";
} else if (this.id == "cell8") {
document.getElementById("cell8").innerHTML = "X";
} else if (this.id == "cell9") {
document.getElementById("cell9").innerHTML = "X";
}
}
document.getElementById("cell1").onclick = click;
document.getElementById("cell2").onclick = click;
document.getElementById("cell3").onclick = click;
document.getElementById("cell4").onclick = click;
document.getElementById("cell5").onclick = click;
document.getElementById("cell6").onclick = click;
document.getElementById("cell7").onclick = click;
document.getElementById("cell8").onclick = click;
document.getElementById("cell9").onclick = click;
This method successfully creates an X into each and every cell on the table when clicked. The next task is something I don't understand as I have to now incorporate 'O's into the table, like a Tic Tac Toe Game..which is fine but there should be turns like once there is an X the next one should be an O and then an X and so on. Can anyone tell me please what would be appropriate to do and which method/function can be used in such an instance? Ta!
you need a variable for it
var nextTurn = 'X'
at the top
then something like:
if (this.id == "cell1")
{
if(document.getElementById("cell1").innerHTML == ""){
document.getElementById("cell1").innerHTML = nextTurn;
changeTurn();
}
}
etc
function changeTurn(){
if(nextTurn == 'X'){
nextTurn = 'O';
} else {
nextTurn = 'X';
}
}
I have cleaned up your code a bit:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Example</title>
<style type="text/css">
td{width:20px;height:20px;text-align: center;vertical-align: middle;}
</style>
</head>
<body>
<table border="1" cellpadding="5">
<tbody>
<tr>
<td ></td>
<td ></td>
<td ></td>
</tr>
<tr>
<td ></td>
<td ></td>
<td ></td>
</tr>
<tr>
<td ></td>
<td ></td>
<td ></td>
</tr>
</tbody>
</table>
<script type="text/javascript">
//IE 8 and below doesn't have String.trim() so have to add it
if(!String.prototype.trim){
String.prototype.trim=function(){
return this.replace(/^[\s]*[\s]*$/igm,"");
}
}
var game={
currentPlayer:"X",
move:function(e){
e=window.event||e;//IE uses window.event
var src=e.target||e.srcElement;
if(src.tagName==="TD"&&src.innerHTML.trim()===""){
src.innerHTML=game.currentPlayer;
game.currentPlayer=(game.currentPlayer==="X")?"O":"X";
}
}
}
var table=document.body.getElementsByTagName("table")[0];
if(typeof table.addEventListener==="function"){
table.addEventListener("click",game.move);
}else if(typeof table.attachEvent){
//for IE
table.attachEvent("onclick", game.move);
}
</script>
</body>
</html>
I am trying to add and subtract values when the user clicks on the radio button. All the radio buttons are dynamically created from database values.
There maybe multiple categories inside one heading but user will be able to choose only one. I am stuck in subtracting the value when the user selects another option.
If you are kind enough ;), you can check this pasting in your editor (oh yeah.. I am a total newbie when it comes to programming.)
Any solution or different approach will be much much much appreciated.
Thanks...
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
.active {
background: #ccc;
}
.program {
border:1px solid blue;
}
.program td, .program th {
padding:10px;
border:1px solid grey;
}
.grandTotal {
width:200px;
height:35px;
font-size:18px;
font-weight:bold;
text-align:center;
line-height:35px;
background-color:#999;
margin-top:35px;
}
</style>
</head>
<body>
<div class="program-box">
<span>You can select or deselect the radio button</span>
<h2>Heading1</h2>
<table class="program" cellpadding="0" cellspacing="1">
<tr>
<th class="w-5"></th>
<th class="w-35">Name</th>
<th class="w-30">Location</th>
<th class="w-10">#days</th>
<th class="w-10">Price</th>
</tr>
<tr>
<td><input name=cat1 value=3 id=3 type='radio' class='v'/></td>
<td>categeory 1</td>
<td>location1</td>
<td>5</td>
<td class="price1">100</td>
</tr>
</table>
<h2>Heading2</h2>
<table class="program" cellpadding="0" cellspacing="1">
<tr>
<th class="w-5"></th>
<th class="w-35">Name</th>
<th class="w-30">Location</th>
<th class="w-10">#days</th>
<th class="w-10">Price</th>
</tr>
<tr>
<td><input name=cat2 value=1 id=1 type='radio' class='v'/></td>
<td>category2</td>
<td>location2</td>
<td>4</td>
<td class="price1">200</td>
</tr>
<tr>
<td><input name=cat2 value=2 id=2 type='radio' class='v'/></td>
<td>category2</td>
<td>location3</td>
<td>8</td>
<td class="price1">150</td>
</tr>
</table>
<div class="price">
<div class="grandTotal">1800</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("input[type='radio']").mousedown(function(e) {
if ($(this).attr("checked") == true) {
setTimeout("$('input[id=" + $(this).attr('id') + "]').removeAttr('checked');", 200);
}
else {
return true
}
});
});
$(".v").click(function() {
$(this).toggleClass("active");
$(this).closest('.program').find('.v').not(this).removeClass('active');
var actPrice = 1800; // default 1800
actPrice = parseInt(actPrice); // convert this to integer
var isSet = $(this).hasClass("active");
var grandTotal=$(".grandTotal").text();
if (grandTotal=="")
{
//alert('no total till now');
var grandTotal=0;
} else {
grandTotal=parseInt(grandTotal);
//alert(grandTotal);
}
var div=parseInt($(this).closest('tr').find(".price1").text());
if(isSet)
{
if(grandTotal>0){
var total = grandTotal+div;
} else {
var total = actPrice+div;
}
//alert(total);
$(".grandTotal").html(total);
} else
{
var div2 = parseInt($(this).closest('tr').find(".price1").text());
var newTotal = grandTotal-div2;
$(".grandTotal").html(newTotal);
}
});
</script>
</div>
</body>
</html>
You were pretty close! I modified your code slightly and cleaned some things up, but you were almost there:
$(document).ready(function() {
$("input[type='radio']").mousedown(function(e) {
var self = this;
/* Use 'checked' property instead of wrapping in jQuery object */
if (self.checked) {
/* Use setTimeout with a function instead of JS string */
setTimeout(function() {
self.checked = false;
}, 200);
}
else {
return true;
}
});
/* Assign click handler inside document.ready: */
$(".v").click(function() {
/* Cache selectors that are used over and over: */
var $this = $(this);
var $grandTotalContainer = $(".grandTotal");
/* Call parseInt with radix parameter: */
var grandTotal = parseInt($grandTotalContainer.text(), 10);
var price =
parseInt($this.closest('tr').find(".price1").text(), 10);
var siblingAmounts = 0;
var name = $this.attr("name");
/* Find prices of items in the same "group": */
$("input[name='" + name + "'].active")
.not($this)
.each(function() {
siblingAmounts +=
parseInt($(this).closest("tr").find(".price1").text(), 10);
});
$this.toggleClass("active");
$("input[name='" + name + "']").not($this).removeClass("active");
if ($this.hasClass("active")) {
grandTotal -= siblingAmounts;
grandTotal += price;
}
else {
grandTotal -= price;
}
$grandTotalContainer.html(grandTotal);
});
});
Notes:
Calling setInterval with a JavaScript string instead of a function is considered bad practice because it calls eval() which can cause problems.
Directly accessing DOM element properties where it works is preferrable to wrapping this in a jQuery object and using jQuery methods to access those properties.
Calling parseInt with the radix parameter is highly recommended because otherwise JavaScript tries to assume the radix.
I removed the code that worked with a default grand total and just parsed out the value inside the grand total div.
I select siblings of the clicked input using the attribute equals selector
Make sure and cache jQuery results that you use over and over. There's overhead to executing jQuery functions that you can avoid if you cache the results of queries.
You shouldn't use integers as ids for HTML elements, as they're invalid under the HTML 4.01 specification.
Here's a working example: http://jsfiddle.net/andrewwhitaker/8Atf8/1/
Hope that helps!