I ran the Code, it showed the result then it immediately turned in to "Not found". This code is about to calculate days in a given year that 's entered from the form. Can any one show me my mistake and solve it. Thanks
<!DOCTYPE html>
<html>
<body>
<form>
<label for="fname">year:</label><br>
<input type="number" id="no" name="fname"><br>
<button onclick="nam('no')">choose</button>
</form>
<p>days of year</p>
<p id="demo"></p>
<script>
function nam(id)
{
var x=document.getElementById(id).value;
function daysInMonth(month, year) {
return new Date(year, month, 0).getDate();
}
var jan = daysInMonth(1, x);
var feb = daysInMonth(2, x);
var maa = daysInMonth(3, x);
var apr = daysInMonth(4, x);
var mei = daysInMonth(5, x);
var jul = daysInMonth(6, x);
var jun = daysInMonth(7, x);
var aug = daysInMonth(8, x);
var sep = daysInMonth(9, x);
var okt = daysInMonth(10, x);
var nov = daysInMonth(11, x);
var dec = daysInMonth(12, x);
var dagen = jan + feb + maa + apr + mei + jul + jun + aug + sep + okt + nov + dec;
document.getElementById("demo").innerHTML = dagen;
}
</script>
</body>
</html>
That is because you are using <form> tag. It will reload the page. Handle nam function from onsubmit in <form> tag. Else, don't use <form> tag.
<!DOCTYPE html>
<html>
<body>
<form onsubmit="nam(event,'no')">
<label for="fname">year:</label><br>
<input type="number" id="no" name="fname"><br>
<button>choose</button>
</form>
<p>days of year</p>
<p id="demo"></p>
<script>
function nam(e, id)
{
e.preventDefault();
var x=document.getElementById(id).value;
function daysInMonth(month, year) {
return new Date(year, month, 0).getDate();
}
var jan = daysInMonth(1, x);
var feb = daysInMonth(2, x);
var maa = daysInMonth(3, x);
var apr = daysInMonth(4, x);
var mei = daysInMonth(5, x);
var jul = daysInMonth(6, x);
var jun = daysInMonth(7, x);
var aug = daysInMonth(8, x);
var sep = daysInMonth(9, x);
var okt = daysInMonth(10, x);
var nov = daysInMonth(11, x);
var dec = daysInMonth(12, x);
var dagen = jan + feb + maa + apr + mei + jul + jun + aug + sep + okt + nov + dec;
document.getElementById("demo").innerHTML = dagen;
}
</script>
</body>
</html>
Your getting a 404 Not Found error becasue when the button is clicked the form is being submitted. Since this is not the behaviour you want, you can use preventDefault() to prevent the default behaviour from being executed.
Something like this should fix the issue:
function nam(e, id) {
e.preventDefault();
var x = document.getElementById(id).value;
var jan = daysInMonth(1, x);
var feb = daysInMonth(2, x);
var maa = daysInMonth(3, x);
var apr = daysInMonth(4, x);
var mei = daysInMonth(5, x);
var jul = daysInMonth(6, x);
var jun = daysInMonth(7, x);
var aug = daysInMonth(8, x);
var sep = daysInMonth(9, x);
var okt = daysInMonth(10, x);
var nov = daysInMonth(11, x);
var dec = daysInMonth(12, x);
var dagen = jan + feb + maa + apr + mei + jul + jun + aug + sep + okt + nov + dec;
document.getElementById("demo").innerHTML = dagen;
}
function daysInMonth(month, year) {
return new Date(year, month, 0).getDate();
}
<!DOCTYPE html>
<html>
<body>
<form>
<label for="fname">year:</label><br>
<input type="number" id="no" name="fname"><br>
<button onclick="nam(event, 'no')">choose</button>
</form>
<p>days of year</p>
<p id="demo"></p>
</body>
</html>
Since you have included the input inside the form when you click on the button it executes the nam() function and then submits the form.
To prevent this behavior you can change the button type to submit and call the nam() function when the user clicks on the button via onsubmit attribute and then pass in the event and the id of the element you which want the value. In your JavaScript you can use e.preventDefault() to prevent the form from submitting.
Try the below snippet
function nam(e, id) {
e.preventDefault()
var x = document.getElementById(id).value;
function daysInMonth(month, year) {
return new Date(year, month, 0).getDate();
}
var jan = daysInMonth(1, x);
var feb = daysInMonth(2, x);
var maa = daysInMonth(3, x);
var apr = daysInMonth(4, x);
var mei = daysInMonth(5, x);
var jul = daysInMonth(6, x);
var jun = daysInMonth(7, x);
var aug = daysInMonth(8, x);
var sep = daysInMonth(9, x);
var okt = daysInMonth(10, x);
var nov = daysInMonth(11, x);
var dec = daysInMonth(12, x);
var dagen = jan + feb + maa + apr + mei + jul + jun + aug + sep + okt + nov + dec;
document.getElementById("demo").innerHTML = dagen;
}
<!DOCTYPE html>
<html>
<body>
<form onsubmit="nam(event, 'no')">
<label for="fname">year:</label><br>
<input type="number" id="no" name="fname"><br>
<button type=submit>choose</button>
</form>
<p>days of year</p>
<p id="demo"></p>
<script>
</script>
</body>
</html>
Related
I am creating a JavaScript hangman game and am having trouble figuring out how I would prompt the user to guess the letters of the hangman puzzle, and then update the page with .innerHTML the guessed letter in place of the dashes I have on the screen.
I have a while loop set up to prompt for the guesses and do the work of placing the letters that are guessed in the length of the word, but it will prompt continually until more than 10 guesses are made and than print the dashes to screen.
This is the code that I am currently using.
function myGame()
{
var player_name = document.getElementById("player");
document.getElementById("user_name").innerHTML = "Welcome " + player_name.value + " to Wheel of Fortune";
var count = 0;
var phrase = "parseint";
var lgth = phrase.length; var checkWin = false; var correct_guess = false; var guess;
var numCols = lgth; new_word = ""; var crazyWord = ""; var new_word = ""; crzLgth = crazyWord.length;
for (var cols = 0; cols < numCols; cols++)
document.getElementById('wheel_game' + cols).innerHTML = ("/ ");
document.getElementById('hWord').innerHTML = "The word was " + (phrase);
while (checkWin === false && count < 10)
{
correct_guess = false;
guess = prompt("Guess a letter");
for (var j = 0; j < lgth; j++)
{
if (guess === phrase.charAt(j))
{
correct_guess = true;
count = count + 1;
document.getElementById('wheel_game' + j).innerHTML = guess;
for (var nw = 0; nw < lgth; nw++)
crazyWord = crazyWord + (document.getElementById('wheel_game' + nw).innerHTML);
}
new_word = crazyWord.substr((crzLgth - lgth), lgth);
checkWin = checkWord(phrase, new_word);
}
if (checkWin === true)
{
document.getElementById("result").innerHTML = ("You win!");
}
else if (checkWin === false)
{
document.getElementById("result").innerHTML = ("You Lose");
if (correct_guess === false)
count = count + 1;
if (count === 10)
{
guess = prompt("One last chance to guess the word");
}
if(guess.length !== 1 && guess !== "parseint") {
break;
}
else if(guess === 'parseint' && guess.length === 8) {
checkWin = true;
document.getElementById("result").innerHTML = ("You win!");
}
}
}
function checkWord(phrase, otherWord)
{
var cleanWord;
cleanWord = otherWord;
if (phrase === cleanWord)
return true;
else
return false;
}
}
Here is my HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Hangman">
<title>Hangman</title>
</head>
<body>
<h1>Welcome player</h1>
<p> Please Enter your name. </p>
<input type="text" id="player" onchange="myGame();" />
<p id="user_name"> </p> <br>
<div id="wheel_game0"></div> <br>
<div id="wheel_game1"></div> <br>
<div id="wheel_game2"></div> <br>
<div id="wheel_game3"></div> <br>
<div id="wheel_game4"></div> <br>
<div id="wheel_game5"></div> <br>
<div id="wheel_game6"></div> <br>
<div id="wheel_game7"></div> <br>
<div id="wheel_game8"></div> <br>
<div id="wheel_game9"></div> <br>
<div id="hWord"><p></p></div>
<div id="result"><p></p></div>
<script src="myScript_2.js"></script>
</body>
</html>
I tried using a continue statement because I thought that it would skip the iteration of the loop which would keep guessing but unfortunately that did not work. I essentially need the program to prompt the user to guess a letter and than display the letter in place of a dash but for every guess.
Any help would be appreciated.
I'm new to razor page
I have an edit page - that it has 2 selection tags
1 - "MissionTime" and the other - "MissionDay".
The choices in MissionDay vary according to the choice of MissionTime.
In terms of JavaScript it works great! On the Create page it works really well.
Also on the edit page it works well on the part of the JavaScript.
The problem is when the database has information () but it does not select according to the value in the database.
<div class = "col-sm-4">
<label asp-for = "Mission.MissionTime" class = "control-label"> </label>
<select id = "MissionTime" asp-for = "Mission.MissionTime">
<option value = "0">
with no
</option>
<option value = "1">
Every day
</option>
<option value = "7">
once a week
</option>
<option value = "30">
once a month
</option>
<option value = "365">
Once a year
</option>
</select>
</div> <div class = "col-sm-4">
<label asp-for = "Mission.MissionDay" class = "control-label"> </label>
<select id = "MissionDay" asp-for = "Mission.MissionDay">
<option value = "0">
with no
</option>
</select>
</div>
Code JavaScript -
<script>
$ (document) .ready (function () {
missionTime ();
$ ("#MissionTime"). Change (function () {
missionTime ();
});
$ ("#MissionDay"). Change (function () {
var d = new Date ();
var val = $ (this) .val ();
if (val == "Sunday") {
d.setDate (d.getDate () + ((7 - d.getDay ())% 7 + 0)% 7);
} else if (val == "Monday") {
d.setDate (d.getDate () + ((7 - d.getDay ())% 7 + 1)% 7);
} else if (val == "Tuesday") {
d.setDate (d.getDate () + ((7 - d.getDay ())% 7 + 2)% 7);
} else if (val == "Wednesday") {
d.setDate (d.getDate () + ((7 - d.getDay ())% 7 + 3)% 7);
} else if (val == "Thursday") {
d.setDate (d.getDate () + ((7 - d.getDay ())% 7 + 4)% 7);
}
else if (val == "startMonth") {
d.setMonth (d.getMonth () + 1, 1);
}
else if (val == "middleMonth") {
// if 15th of current month is over move to next month
// need to check whether to use> = or just> ie on 15th Jun
// if you want 15 Jun then use> else if you want 15 Jul use> =
var dt = d.getDate ();
d.setDate (15);
if (dt> = 15) {
d.setMonth (date.getMonth () + 1);
}
d.setHours (23, 59, 59, 0);
}
else if (val == "endMonth") {
d.setMonth (d.getMonth () + 1);
d.setDate (0);
}
else if (val == "firstYear") {
d = new Date (new Date (). getFullYear () +1, 0, 1);
}
else if (val == "lastYear") {
d = new Date (new Date (). getFullYear (), 11, 31);
}
var dd = String (d.getDate ()). padStart (2, '0');
var mm = String (d.getMonth () + 1) .padStart (2, '0'); // January is 0!
var yyyy = d.getFullYear ();
d = yyyy + '-' + mm + '-' + dd;
document.getElementById ("firstDate"). value = d;
}
);
function missionTime () {
var val = $ ("# MissionTime"). val ();
if (val == "1") {
$ ("#MissionDay"). Html ("<option value = '0'> without </option>");
today ();
} else if (val == "7") {
$ ("#MissionDay"). Html ("<option value = 'Sunday'> Sunday </option> <option value = 'Monday'> Monday </option> <option value = 'Tuesday'> Tuesday < / option> <option value = 'Wednesday'> Wednesday </option> <option value = 'Thursday'> Thursday </option> ");
var d = new Date ();
d.setDate (d.getDate () + ((7 - d.getDay ())% 7 + 0)% 7);
var dd = String (d.getDate ()). padStart (2, '0');
var mm = String (d.getMonth () + 1) .padStart (2, '0'); // January is 0!
var yyyy = d.getFullYear ();
d = yyyy + '-' + mm + '-' + dd;
document.getElementById ("firstDate"). value = d;
} else if (val == "30") {
. / option> ");
var d = new Date ();
d.setMonth (d.getMonth () + 1, 1);
var dd = String (d.getDate ()). padStart (2, '0');
var mm = String (d.getMonth () + 1) .padStart (2, '0'); // January is 0!
var yyyy = d.getFullYear ();
d = yyyy + '-' + mm + '-' + dd;
document.getElementById ("firstDate"). value = d;
} else if (val == "365") {
$ ("#MissionDay"). Html ("<option value = 'firstYear'> beginning of year </option> <option value = 'lastYear'> end of year </option>");
} else if (val == "0") {
$ ("#MissionDay"). Html ("<option value = '0'> without </option>");
today ();
}
}
function today () {
var today = new Date ();
var dd = String (today.getDate ()). padStart (2, '0');
var mm = String (today.getMonth () + 1) .padStart (2, '0'); // January is 0!
var yyyy = today.getFullYear ();
today = yyyy + '-' + mm + '-' + dd;
document.getElementById ("firstDate"). value = today;
}
});
</script>
The code works great!
The problem is that I can not get the data in the "MissionDay"
I guess this is because first the page takes data from the database and only then does it run the script. Anyone have any tips on how to solve this problem?
Best regards
The problem is when the database has information () but it does not select according to the value in the database.
Please note that the option(s) that you generate on JavaScript client could not be available when the Select Tag Helper is rendered. Therefore it does not set default selected option based on the data passed through Mission.MissionDay.
To achieve your requirement of setting the default selected option based on the stored MissionDay, you can try to store the data in a hidden field, then set the selected option in JavaScript code, like below.
Add a hidden field with id="hf_missionDay"
<label asp-for="Mission.MissionDay" class="control-label"> </label>
<input type="hidden" id="hf_missionDay" value="Mission.MissionDay" />
<select id="MissionDay" asp-for="Mission.MissionDay">
<option value="0">
with no
</option>
</select>
Set selected option based on the data store in hidden field
$(document).ready(function() {
missionTime();
SetSelectionOfMissionDay();
//...
//your code logic here
//...
SetSelectionOfMissionDay function
function SetSelectionOfMissionDay() {
var mday = $("#hf_missionDay").val();
$("select#MissionDay option[value='" + mday + "']").attr("selected", true);
//or
//$("select#MissionDay").val(mday);
}
I have a countdown timer to hide the div then shows another div. i have done this by seconds well , but i want to convert the seconds to minutes and hours.
how can i do this?
pre thanks to anyone answers my question ...
this is my code:
var countDown = 9000;
var i = setInterval(function () {
var b1 = document.getElementById('box1');
var b2 = document.getElementById('box2');
if(countDown === 1) {
if(b1['style'].display == 'none') {
b1['style'].display = 'block';
b2['style'].display = 'none';
} else {
b1['style'].display = 'none';
b2['style'].display = 'block';
}
clearInterval(i);
}
countDown--;
b1.innerHTML = countDown;
}, 1000);
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div id="box1">9000</div>
<div style="display:none" id="box2">div2</div>
</body>
</html>
Example : https://jsfiddle.net/306qtxot/4/
You can use this Jquery:
var countDown = 9000;
var i = setInterval(function () {
var b1 = document.getElementById('box1');
var b2 = document.getElementById('box2');
if(countDown === 1) {
if(b1['style'].display == 'none') {
b1['style'].display = 'block';
b2['style'].display = 'none';
} else {
b1['style'].display = 'none';
b2['style'].display = 'block';
}
clearInterval(i);
}
countDown--;
//This section convert "seconds" to hour And minute And second
var hour=Math.floor(countDown/3600);
var min=Math.floor(countDown%3600/60);
var sec=Math.floor(countDown%3600%60);
//Format : hh:mm:ss
b1.innerHTML = (hour=hour<10?"0"+hour:hour) + " : " + (min=min<10?"0"+min:min) + " : " + (sec=sec<10?"0"+sec:sec);
}, 1000);
<!DOCTYPE html>
<html>
<head>
<title>Find sunday on jan ist </title>
</head>
<!-- body containing submit button to check and div to display the result-->
<body>
<input type="submit" value="Check" onclick="findSun()" />
<div id="output1">
</div>
</body>
<script>
function findSun()
{
//for loop that checks january 1st on each year from 2015 to 2015 for sunday
for(var year = 2015; year <= 2030; year++)
{
var today = new Date(year,0,1);
var dd = today.getDay();
if(dd===0)
{
var dis = "Jan 1st Of :" + year + "is Sunday";
console.log(dis);
document.getElementById('output1').innerHTML = dis;
}
else
{
document.getElementById('output1').innerHTML= "";
}
}
}
</script>
</html>
it is a simple program which checks for sunday on jan 1st for each year starting from 2015-30.I am able to get the correct output on console,but I am not able to get correct output on page using innerHTML. I am new to javascript any help is apprreciated.
You are erasing the content of your 'output1 element' each time the day don't match.
If you want to keep the previously found sunday, you can just append -with += - to the div.
<!DOCTYPE html>
<html>
<head>
<title>Find sunday on jan ist </title>
</head>
<!-- body containing submit button to check and div to display the result-->
<body>
<input type="submit" value="Check" onclick="findSun()" />
<div id="output1">
</div>
</body>
<script>
function findSun()
{
//for loop that checks january 1st on each year from 2015 to 2015 for sunday
for(var year = 2015; year <= 2030; year++)
{
var today = new Date(year,0,1);
var dd = today.getDay();
if(dd===0)
{
var dis = "Jan 1st Of :" + year + "is Sunday";
console.log(dis);
document.getElementById('output1').innerHTML += ", " + dis;
}
else
{
document.getElementById('output1').innerHTML += "\n";
}
}
}
</script>
</html>
You have a couple of problems, the first one is noted above with your else statement erasing the contents of the that can be fixed with a +=.
The second issue is that your if statement has one too many "="
<title>Find sunday on jan ist </title>
</head>
<!-- body containing submit button to check and div to display the result-->
<body>
<input type="submit" value="Check" onclick="findSun()" />
<div id="output1">
</div>
</body>
<script>
function findSun()
{
//for loop that checks january 1st on each year from 2015 to 2015 for sunday
for(var year = 2015; year <= 2030; year++)
{
var today = new Date(year,0,1);
var dd = today.getDay();
if(dd==0)
{
var dis = "Jan 1st of: " + year + " is Sunday";
console.log(dis);
document.getElementById('output1').innerHTML += dis + "<br>";
}
}
}
</script>
</html>
Try changing this It will do the job
Problem was you were over writing the innerhtml not appending thats why it was creating problems.
for(var year = 2015; year <= 2030; year++)
{
var today = new Date(year,0,1);
var dd = today.getDay();
if(dd===0)
{
var dis = "Jan 1st Of :" + year + "is Sunday";
console.log(dis);
document.getElementById('output1').innerHTML += dis + "</br>";
}
else
{
document.getElementById('output1').innerHTML += "";
}
}
Using the Rally App SDK, is there a way to create a table with a variable number of columns? For example, for a selected release, the columns are the iterations within that release date range, and the rows are each project.
I have all of the data I want to display, but not sure how to create the table.
Here's an example app that dynamically builds a table config with Iteration Names as columns and then adds some dummy data to it. Not too exciting, but it illustrates the idea.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- Copyright (c) 2002-2011 Rally Software Development Corp. All rights reserved. -->
<html>
<head>
<title>Iterations as Table Columns</title>
<meta name="Name" content="App: Iterations as Table Columns"/>
<script type="text/javascript" src="https://rally1.rallydev.com/apps/1.29/sdk.js"></script>
<script type="text/javascript">
function iterationsAsTableColumns(rallyDataSource)
{
var wait = null;
var table = null;
var tableHolder = null;
// private method the builds the table of Iteration columns and your info
function showResults(results)
{
if (wait) {
wait.hide();
wait = null;
}
if (table) {
table.destroy();
}
var myIterations = results.iterations;
if (myIterations.length === 0) {
tableHolder.innerHTML = "No iterations were found";
return;
}
var columnKeys = new Array();
var columnHeaders = new Array();
var columnWidths = new Array();
var columnWidthValue = '80px';
var keyName;
// Dynamically build column config arrays for table config
for (i=0; i<myIterations.length;i++){
keyName = "Column"+i;
columnKeys.push(keyName);
columnHeaders.push("'" + myIterations[i].Name + "'");
columnWidths.push("'" + columnWidthValue + "'");
}
var config = { 'columnKeys' : columnKeys,
'columnHeaders' : columnHeaders,
'columnWidths' : columnWidths
};
table = new rally.sdk.ui.Table(config);
var cellValue;
var propertyAttributeStatement;
var rowData = new Array();
for (i=0;i<10;i++){
// create Object for row data
rowItem = new Object();
for (j=0; j<columnKeys.length;j++){
cellValue = "Cell[" + i + "][" + j + "] = Your Data Here";
propertyAttributeStatement = "rowItem." + columnKeys[j] + " = '"+cellValue+"';";
eval(propertyAttributeStatement);
}
rowData.push(rowItem);
}
table.addRows(rowData);
table.display(tableHolder);
}
//private method to query for iterations that get listed as columns
function runMainQuery(sender, eventArgs) {
var queryCriteria = '(Project.Name = "Avalanche Hazard Mapping"")';
var queryConfig =
{
key : "iterations",
type : "Iteration",
fetch : "FormattedID,Name,Project,StartDate,EndDate,CreationDate",
order : "CreationDate desc",
};
tableHolder.innerHTML = "";
wait = new rally.sdk.ui.basic.Wait({});
wait.display(tableHolder);
rallyDataSource.findAll(queryConfig, showResults);
}
//private method to start building controls on page
function initPage() {
buttonSpan = document.getElementById('buttonSpan');
tableHolder = document.getElementById('table');
var buttonConfig = {
text: "Show Table",
value: "myValue"
};
var showTableButton = new rally.sdk.ui.basic.Button(buttonConfig);
showTableButton.display(buttonSpan, runMainQuery);
}
// only public method
this.display = function() {
rally.sdk.ui.AppHeader.showPageTools(true);
initPage();
};
}
</script>
<script type="text/javascript">
rally.addOnLoad(function() {
var rallyDataSource = new rally.sdk.data.RallyDataSource('__WORKSPACE_OID__',
'__PROJECT_OID__',
'__PROJECT_SCOPING_UP__',
'__PROJECT_SCOPING_DOWN__');
var iterationsAsTableColumnsExample = new iterationsAsTableColumns(rallyDataSource);
iterationsAsTableColumnsExample.display();
});
</script>
</head>
<body>
<div>
<span id="buttonSpan"></span>
</div>
<div style="height: 15px;"> </div>
<div id="table"></div>
</body>
</html>