I have to set interval time to show my red button to green and then again to red.
I have 5 text box where one text box is defining the sequence that which button will 1st set to green. I have tried bellow thing but all button gets change to red with out time interval.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<h2>signal</h2>
sequence : <input type="text" id="txtsequence1" value="1,3,2,4" /><br />
signal 1 :<input type="text" id="txt1" value="5" /><br />
signal 2 :<input type="text" id="txt2" value="2" /><br />
signal 3 :<input type="text" id="txt3" value="6" /><br />
signal 4:<input type="text" id="txt4" value="7" /><br />
<input type="button" onclick="return start()" value="Submit" />
<br />
<img class="abc" src="~/Images/red.jpg" style="height:25px;width:25px" id="image1" alt="img1">
<img class="abc" src="~/Images/red.jpg" style="height:25px;width:25px" id="image2" alt="img2">
<img class="abc" src="~/Images/red.jpg" style="height:25px;width:25px" id="image3" alt="img3">
<img class="abc" src="~/Images/red.jpg" style="height:25px;width:25px" id="image4" alt="img4">
<script>
function start() {
var value = document.getElementById("txtsequence1").value;
var spit = value.split(",");
for (var i = 1; i <= spit.length; i++) {
var interval = document.getElementById("txt" + i).value * 1000;
var images = document.getElementById("image" + i);
images.src = "/Images/green.jpg";
setInterval(changegred, interval);
}
function changegred() {
$(".abc").attr("src", "/Images/red.jpg")
}
}
</script>
What I want that in seq table it is define as 1,3,2,4
and in other text box the time interval for 1 image is set as 5
Now for 1 image time interval is set as 5 so the 1 image will change red image to green for 5 second
Now for 3 image time interval is set as 6 so the 1 image will change to red and 3 image will set as green
now in 2 image time interval is set as 2 so the 3 image will change to red and 2 image will set as green
now in 4 image time interval is set as 7 so the 2 image will change to red and 4 image will set as green
If I understood what you want to do correctly, this should do the trick.
I'm using colored divs instead of images, but that shouldn't matter.
The idea here is that we precompute the actions we want to take into an array, and then walk through that with a function and setTimeout.
var actions = [];
var actionTimer = null;
function resetLights() {
Array.from(document.querySelectorAll(".abc")).forEach(el => el.classList.remove("green"));
}
function playNextAction() {
if (!actions.length) { // nothing to do?
resetLights(); // reset, then quit.
return;
}
var action = actions.shift(); // take the first action
resetLights(); // reset all lights
action.element.classList.add("green"); // set the current light to green
actionTimer = setTimeout(playNextAction, action.interval); // enqueue next action in interval
}
function start() {
var value = document.getElementById("txtsequence1").value;
actions = value.split(",").map((i) => {
var interval = document.getElementById("txt" + i).value * 1000;
var element = document.getElementById("image" + i);
return {
element,
interval
};
});
clearTimeout(actionTimer); // clear any pending action
playNextAction(); // play next action
}
.abc {
background: red;
display: inline-block;
margin: 1em;
padding: 1em;
border-radius: 100%;
color: #fff;
}
.abc.green {
background: lime;
color: #000;
}
<h2>signal</h2>
sequence : <input type="text" id="txtsequence1" value="1,3,2,4" /><br />
signal 1 : <input type="number" id="txt1" value="5" /><br />
signal 2 : <input type="number" id="txt2" value="2" /><br />
signal 3 : <input type="number" id="txt3" value="6" /><br />
signal 4 : <input type="number" id="txt4" value="7" /><br />
<input type="button" onclick="return start()" value="Submit" />
<br />
<div class="abc" id="image1" alt="img1">1</div>
<div class="abc" id="image2" alt="img2">2</div>
<div class="abc" id="image3" alt="img3">3</div>
<div class="abc" id="image4" alt="img4">4</div>
<h2>signal</h2>
sequence : <input type="text" id="txtsequence1" value="1,3,2,4" /><br />
signal 1 :<input type="text" id="txt1" value="5" /><br />
signal 2 :<input type="text" id="txt2" value="2" /><br />
signal 3 :<input type="text" id="txt3" value="6" /><br />
signal 4:<input type="text" id="txt4" value="7" /><br />
<input type="button" onclick="return start()" value="Submit" />
<br />
<img class="abc" src="~/Images/red.jpg" style="height:25px;width:25px" id="image1" alt="">
<img class="abc" src="~/Images/red.jpg" style="height:25px;width:25px" id="image2" alt="">
<img class="abc" src="~/Images/red.jpg" style="height:25px;width:25px" id="image3" alt="">
<img class="abc" src="~/Images/red.jpg" style="height:25px;width:25px" id="image4" alt="">
<script>
var count = 0;
function start() {
var value = document.getElementById("txtsequence1").value;
var spit = value.split(",");
var intervalUpto = 0;
for (var i = 1; i <= spit.length; i++) {
count = spit[i - 1];
var intervalCurrent = document.getElementById("txt" + count).value * 1000;
var b = createInterval(funcb, count, intervalUpto);
createInterval(clearInterval, b, intervalUpto);
intervalUpto = intervalUpto + intervalCurrent;
var a = createInterval(funca, count, intervalUpto);
createInterval(clearInterval, a, intervalUpto);
}
function funca(id) {
var images = document.getElementById("image" + id);
images.src = "/Images/red.jpg";
}
function funcb(id) {
var images = document.getElementById("image" + id);
images.src = "/Images/green.jpg";
}
function clearInterval(id) { clearTimeout(id); }
function createInterval(f, dynamicParameter, interval) { return setInterval(function () { f(dynamicParameter); }, interval); }
}
</script>
Here I had also resolved this in some different way
Related
Basically I want to count and display the amount of months it would take to get to a certain point (savings balance) based on a contribution every month.
Here is what I have so far:
function howLong(initial,interest,goal,added){
var initialDeposit = parseInt(initial);
var interestInt = parseInt(interest);
var targetSaving = parseInt(goal);
var contribution = parseInt(added);
var monthCount = 0;
while(initialDeposit <= targetSaving){
monthCount++;
initialDeposit+contribution
}
alert(monthCount)
}
Here is my html form:
<form>
Initial Deposit:<br />
<input type="number" id="initial"><br /><br />
Interest:<br />
<input type="number" id="interest"><br /><br />
Target savings amount:<br />
<input type="number" id="goal"><br /><br />
Monthly Contribution:<br />
<input type="number" id="contribution"><br /><br />
<input type="button" value="How Long!?" onclick="howLong(document.getElementById('initial').value,document.getElementById('interest').value,document.getElementById('goal').value),document.getElementById('contribution').value">
</form>
You need to add the value of contribution to initialDeposit.
initialDeposit += contribution;
For the other problem, you have an error in the call of the function
document.getElementById('goal').value),document.getElementById('contribution').value"
^ >>>>>>>>>>>>>>>> should go >>>>>>>>>>>>>>>>> ^
shold be
onclick="howLong(
document.getElementById('initial').value,
document.getElementById('interest').value,
document.getElementById('goal').value,
document.getElementById('contribution').value
)"
The last round bracket is closing to early.
function howLong(initial, interest, goal, added) {
var initialDeposit = parseInt(initial);
var interestInt = parseInt(interest);
var targetSaving = parseInt(goal);
var contribution = parseInt(added);
var monthCount = 0;
while (initialDeposit <= targetSaving) {
monthCount++;
initialDeposit += contribution;
}
alert(monthCount)
}
<form>
Initial Deposit:<br />
<input type="number" id="initial"><br /><br /> Interest:
<br />
<input type="number" id="interest"><br /><br /> Target savings amount:<br />
<input type="number" id="goal"><br /><br /> Monthly Contribution:<br />
<input type="number" id="contribution"><br /><br />
<input type="button" value="How Long!?" onclick="howLong(document.getElementById('initial').value,document.getElementById('interest').value,document.getElementById('goal').value,document.getElementById('contribution').value)">
</form>
Change to initialDeposit += contribution;
As other answers have pointed out initialDeposit += contribution will solve the issue, but you don't need a loop here at all:
var monthCount = Math.ceil((targetSaving - initialDeposit)/contribution);
This is presuming that the contribution is constant, of course.
You were missing += operator and interest as well.
function howLong(){
var initialDeposit = parseInt(document.getElementById('initial').value);
var interestInt = parseInt(document.getElementById('interest').value);
var targetSaving = parseInt(document.getElementById('goal').value);
var contribution = parseInt(document.getElementById('contribution').value);
var monthCount = 0;
while(initialDeposit <= targetSaving){
monthCount++;
initialDeposit += contribution + interestInt; //+= was missing and interestInt as well
}
alert(monthCount);
}
<form>
Initial Deposit:<br />
<input type="number" id="initial"><br /><br />
Interest:<br />
<input type="number" id="interest"><br /><br />
Target savings amount:<br />
<input type="number" id="goal"><br /><br />
Monthly Contribution:<br />
<input type="number" id="contribution"><br /><br />
<input type="button" value="How Long!?" onclick="howLong()">
</form>
I'm writing a program to add tests, exams, practicals, assignments to a module.
With regards to the course weighting I was wondering if you could dynamically change the value of the total weighting when a user enters a weighting per task.
Like this:
Problem
The inputs in the red rectangle should be added up and displayed in the blue rectangles label.
In turn, the blue rectangle should be added up and displayed in the green rectangles label.
Any help will be appreciated please
I have tried this so far:
<form name="Calcultor" Method="Get" id='form1'>First Number:
<input type="text" name="fnum" size="35" id="first">
+ Second Number:
<input type="text" name="snum" size="35" id="sec">
+ Third Number:
<input type="text" name="lom" size="35" id="third3">
<br>
<br>Answer:
<input type="text" name="ans" size="35" id="ans" />
<button type="button" onclick="Calculate();">Calculate</button>
<script lang="javascript">
function Calculate() {
var first = document.getElementById('first').value;
if(document.getElementById('sec'))
{
var last = document.getElementById('sec').value;
}
else
{
var last = 0;
}
if(document.getElementById('third'))
{
var third = document.getElementById('third').value;
}
else
{
var third = 0;
}
document.getElementById('ans').value = parseInt(first) + parseInt(last) + parseInt(third);
document.form1.submit();
}
https://jsfiddle.net/www1fxjb/9/
What I am asking is to change the label as soon as the numbers change in the input fields.
You need to use the onchangeevent in your input fields properties.
You can then point your onchangeevent to your calculate method.
Also, add default values of "0" in your input fields so that it will always have a value to add and this will prevent errors.
<input type="number" name="fnum" size="35" id="first" onchange="Calculate();" value="0"/>
+ Second Number:
<input type="number" name="snum" size="35" id="second" onchange="Calculate();" value="0"/>
+ Third Number:
<input type="number" name="lom" size="35" id="third" onchange="Calculate();" value="0"/>
<br />
Answer:
<input type="text" name="ans" size="35" id="ans" />
Javascript:
<script lang="javascript">
function Calculate() {
if (document.getElementById('first')) {
var first = document.getElementById('first').value;
}
else {
var first = 0;
}
if (document.getElementById('second'))
{
var second = document.getElementById('second').value;
}
else
{
var second = 0;
}
if (document.getElementById('third'))
{
var third = document.getElementById('third').value;
}
else
{
var third = 0;
}
document.getElementById('ans').value = parseInt(first) + parseInt(second) + parseInt(third);
document.form1.submit();
}
</script>
Hope it helps.
I've been working on a hangman game using an HTML template and javascript for a project for a class.
I am currently stuck with a few issues.
1. I am using an array to call the pictures for wrong guesses to add parts to the body in the gallows. only picture #4 shows up when 4 incorrect guesses have occurred.
2. I also have the issue that only for certain words do the buttons decide to actually work and the letter "o" never works
Any help would be greatly appreciated.
<!DOCTYPE HTML>
<html>
<head>
<title>Hangman</title>
<meta charset="utf-8">
<script type="text/javascript" language="JavaScript">
var NumberOfChances;
var theWord = "",oldString="";
var currentGuessed = "";
var value="";
var words = new Array();
words[0]="No strings attached";
words[1]="Never look back";
words[2]="Happy birthday";
words[3]="Against all odds";
words[4]="Break a leg";
words[5]="Off the beaten path";
words[6]="Good old days";
words[7]="Gold rush";
words[8]="Happy camper";
words[9]="Grin from ear to ear";
words[10]="Live long and prosper";
words[11]="Quartz watch";
words[12]="Jumping jacks";
words[13]="Income tax";
var image = new Array();
image[0] = '<img src="image0.jpg" align ="left" width="415" height="496">';
image[1] = "<img src='image1.jpg' align ='left' width='415' height='496'>";
image[2] = '<img src="image2.jpg" align ="left" width="415" height="496">';
image[3] = '<img src="image3.jpg" align ="left" width="415" height="496">';
image[4] = '<img src="image4.jpg" align ="left" width="415" height="496">';
image[5] = '<img src="image5.jpg" align ="left" width="415" height="496">';
image[6] = '<img src="image6.jpg" align ="left" width="415" height="496">';
NumberOfChances = image.length;
function swap(image)
{
document.getElementById("images").src =image+".gif";
}
var usedLetters = new Array();
function secretWord()
{
debugger
theWord = words[Math.floor(Math.random()*51)];
for (i=0; i<theWord.length; i++)
{
currentGuessed = currentGuessed + "*";
}
document.getElementById("secretWord").value = currentGuessed;
debugger
}
function gameProcess()
{
currentGuessed ="";
secretWord();
NumberOfChances=0;
document.getElementById("lives").value = NumberOfChances;
startImage = image[0];
}
function turn(letterGuessed)
{
debugger
value = oldString = "";
var correctGuess = false;
for (i=0; i<theWord.length; i++)
{
if (theWord.charAt(i) == letterGuessed)
{
value = value + letterGuessed;
currentGuessed = currentGuessed.replace(oldString + "*",value);
oldString = value;
correctGuess=true;
}
else
{
if(currentGuessed.charAt(i) == "*")
{
value = value + '*';
oldString = oldString + "*";
}
else
{
value = value + currentGuessed.charAt(i);
oldString = oldString + currentGuessed.charAt(i);
}
}
}
if (!correctGuess)
{
NumberOfChances++;
swap("image" + NumberOfChances );
if (NumberOfChances==6)
{
alert("You Lost!");
document.getElementById("secretWord").value = theWord;
theWord = "";
currentGuessed = "";
}
document.getElementById("lives").value = NumberOfChances;
if(correctGuess != 0)
{
takeChance();
}
}
win();
}
function win()
{
var winCount = 0;
for(var i = 0;i<theWord.length;i++)
{
if(currentGuessed.charAt(i) == "*")
{
winCount++;
}
document.getElementById("secretWord").value = currentGuessed;
}
if(winCount == 0 && currentGuessed != "")
{
alert("yay, you win!");
}
}
</script>
</head>
<body>
<H1>Lets play Hangman</H1>
<form name="userGuessForm" id="form1">
<div id="Image"><img src="image0.gif" align ="left" width="415" height="496" id="images"/></div>
<div id="wordDisplay"></div>
This is the Secret Word<br /><input id="secretWord" type="text" value="currentGuessed" />
<br />
<input id="letters" type="button" name="a" value="a" onClick="turn('a');">
<input id="Button1" type="button" name="b" value="b" onClick="turn('b');">
<input id="Button2" type="button" name="c" value="c" onClick="turn('c');">
<input id="Button3" type="button" name="d" value="d" onClick="turn('d');">
<input id="Button4" type="button" name="e" value="e" onClick="turn('e');">
<input id="Button5" type="button" name="f" value="f" onClick="turn('f');">
<input id="Button6" type="button" name="g" value="g" onClick="turn('g');">
<input id="Button7" type="button" name="h" value="h" onClick="turn('h');">
<input id="Button8" type="button" name="i" value="i" onClick="turn('i');">
<input id="Button9" type="button" name="j" value="j" onClick="turn('j');">
<input id="Button10" type="button" name="k" value="k" onClick="turn('k');">
<input id="Button11" type="button" name="l" value="l" onClick="turn('l');">
<input id="Button12" type="button" name="m" value="m" onClick="turn('m');">
<input id="Button13" type="button" name="n" value="n" onClick="turn('n');">
<input id="Button14" type="button" name="o" value="o" onClick="turn('o');">
<input id="Button15" type="button" name="p" value="p" onClick="turn('p');">
<input id="Button16" type="button" name="q" value="q" onClick="turn('q');">
<input id="Button17" type="button" name="r" value="r" onClick="turn('r');">
<input id="Button18" type="button" name="s" value="s" onClick="turn('s');">
<input id="Button19" type="button" name="t" value="t" onClick="turn('t');">
<input id="Button20" type="button" name="u" value="u" onClick="turn('u');">
<input id="Button21" type="button" name="v" value="v" onClick="turn('v');">
<input id="Button22" type="button" name="w" value="w" onClick="turn('w');">
<input id="Button23" type="button" name="x" value="x" onClick="turn('x');">
<input id="Button24" type="button" name="y" value="y" onClick="turn('y');">
<input id="Button25" type="button" name="z" value="z" onClick="turn('Z');"><br />
Number of Tries (6): <input id="lives" type="text" value="0" onfocus="lives.blur();" SIZE=2>
<input type="button" name="submit" value=" Start Over " onClick="gameProcess()">
<input type="button" name="end" value=" END " onClick="gameEnd()"><br />
</form>
</body>
</html>
Your images aren't working correctly because you're using an array as a string.
document.getElementById("images").src =image+".gif";
should be
document.getElementById("images").src ="image"+NumberOfChances+".gif";
otherwise, what you're doing is taking the html of all the images and setting it as the src attribute for your image.
<img src="<img src="image0.jpg" align ="left" width="415" height="496">, <img src="image1.jpg" align ="left" width="415" height="496">, <img src="image2.jpg" align ="left" width="415" height="496">..." id="images"> This isn't what you want!
And also, I think you've got your jpgs and gifs mixed up. Check your file extensions.
Also, do you have 50 words that you aren't showing here? Your array contains 13, but later you write
theWord = words[Math.floor(Math.random()*51)];
And that seems to suggest you have one less than 51, or 50, words.
In your letterGuessed function, I don't think you're quite grasping the concept of for loops. What you seem to be thinking is that a new iteration happens each time you call the function, but that isn't the case. Rather, the for loop goes through the entire word each time you call the function with the one letter you guessed. So unless every single letter in the word is o, if you guess the letter o, you'll get one point for every o in the word, and -1 chance for every character that isn't o, which isn't what you want. Ditch the for loop and just use i++ for each time the function runs.
function swap(image)
{
document.getElementById("images").src =image+".gif";
}
Try changing gif to jpg
if (!correctGuess)
{
NumberOfChances++;
swap(image[NumberOfChances]);
I am having trouble with getElementById returning null. I have tried putting the id directly into it, which works fine.
This function is called by the submit button, it retrieves the names of uploaded files and writes them to hidden fields.
function onSubmitting() {
try {
var AU = $('#uploader').data('AU');
var file_list = AU.files;
var i = 0;
while (i < 10) {
var tempName = "image" + i.toString();
if (!(typeof file_list[i] === "undefined")) {
document.getElementById(tempName).value = "test";
}
i++;
}
}
catch (err) {
alert(err.message);
}
}
The relevant html is here:
<input type="hidden" name="image1" id="image1" />
<input type="hidden" name="image2" id="image2" />
<input type="hidden" name="image3" id="image3" />
<input type="hidden" name="image4" id="image4" />
<input type="hidden" name="image5" id="image5" />
<input type="hidden" name="image6" id="image6" />
<input type="hidden" name="image7" id="image7" />
<input type="hidden" name="image8" id="image8" />
<input type="hidden" name="image9" id="image9" />
<input type="hidden" name="image10" id="image10" />
Thanks for any help
The first time through the loop the ID will be image0 which is not present in your HTML.
Your loop runs from 0 to 9, but your elements are named from 1 to 10. Change
for (var i=0; i<10; i++)
to
for (var i=1; i<=10; i++)
or use (i+1) everywhere in the loop body
As Bergi and Justin said, you're starting your loop with i=0. I've updated it to use i=1, and i <= 10, and it works as expected :)
See: http://jsfiddle.net/sAKJd/
I have a form that I need to figure out the code on how to make sure a radio button is selected
Here is the form
<body>
<div id="content">
<p>Enter the values below and click "Calculate".</p>
<label for="length">Length:</label>
<input type="text" id="length" /><br />
<label for="width">Width:</label>
<input type="text" id="width" /><br />
<label for="answer">Answer:</label>
<input type="text" id="Answer" disabled="disabled" /><br />
<input type="radio" name="Area" value="Area" check="checked"/>Area<br />
<input type="radio" name="Parimeter" value="Parimeter" />Parimeter<br />
<label> </label>
<input type="button" id="calculate" value="Calculate" /><br />
</div>
</body>
</html>
here is the code
var $ = function (id) {
return document.getElementById(id);
}
var calculate_click = function () {
var length = parseFloat( $("length").value );
var width = parseFloat( $("width").value );
// $("area").value = "";
if (isNaN(length) || length <= 0) {
alert("Length must be a valid number\nand greater than zero.");
} else if(isNaN(width) || width <= 0) {
alert("Width must be a valid number\nand greater than zero.");
}
} else {
var area = width * length;
var perimeter = 2 * width + 2 * length;
$("area").value = area.toFixed(2);
$("perimeter").value = perimeter.toFixed(2);
}
}
window.onload = function () {
$("calculate").onclick = calculate_click;
$("length").focus();
}
Here are some links that may help you finish your homework:
http://www.w3schools.com/html/html_forms.asp
http://www.w3schools.com/jquery/default.asp
http://jsfiddle.net