HTML and Javascript changing visibility - javascript

I have tried searching this up many times. I have come close, but have not figured this out yet. What I am trying to do is when the user reaches a certain amount of clicks, a button pops up.
<!DOCTYPE html>
<html>
<head>
<title>++ Increment</title>
</head>
<body>
<h1>Click the Button</h1>
<input type="button" id="countButton" onclick="hi()" value="Click Me!"/>
<p class="ClickCount">Clicks: <a id="amount">0</a></p>
<input type="button" id="countButton" onclick="store()" value="Store"/>
<input type="button" style="visibility:hidden;" value="Button" id="Sir" />
</body>
</html>
Here is the javascript:
var count = 0;
function hi() {
count += 1;
document.getElementById("amount").innerHTML = count;
}
if (count >= 20) {
document.getElementById("Sir").style.visibility = "visible";
}
I think I need to assign the count variable outside the hi() function, but I don't know how to do that (or if that's possible)

From mobile so excuse my pseudo code
Is you're using jquery, you can store the value in a
$(btn).data('clicks')
Otherwise define a global variable above your hi function.
Then you need to put your logic of if(clicks > 20) inside your hi function

var count = 0;
function store(){
alert(count);
}
function hi() {
count += 1;
document.getElementById("amount").innerHTML = count;
if (count >= 4) document.getElementById('Sir').style.display = 'inline-block';
}
#Sir{display:none;}
<h1>Click the Button</h1>
<input type="button" id="countButton" onclick="hi()" value="Click Me!"/>
<p class="ClickCount">Clicks: <a id="amount">0</a></p>
<input type="button" id="countButton" onclick="store()" value="Store"/>
<input type="button" value="Button" id="Sir" />

Try this:
<!DOCTYPE html>
<html>
<head>
<title>++ Increment</title>
</head>
<body>
<h1>Click the Button</h1>
<input type="button" id="countButton" value="Click Me!"/>
<p class="ClickCount">Clicks: <a id="amount">0</a></p>
<!-- <input type="button" id="countButton" onclick="store()" value="Store"/> -->
<input type="button" style="visibility:hidden;" value="Button" id="Sir" />
<script>
var count = 0;
var clickbutton = document.getElementById("countButton");
var showbutton = document.getElementById("Sir");
var amountstatus = document.getElementById("amount");
clickbutton.onclick = function(){
if(count < 3){
count++;
amountstatus.innerHTML = count;
}
else{
showbutton.style.visibility = "visible";
}
}
</script>
</body>
</html>
Check I put this <input type="button" id="countButton" onclick="store()" value="Store"/> in comments, that's why you must not have two id with the same name.

Hello can you please give a try to following code below:
var count = 0;
function hi() {
count += 1;
document.getElementById("amount").innerHTML = count;
if (count >= 20) {
document.getElementById("Sir").style.visibility = "visible";
}
}
Only change i think to move if condition inside hi function. Hope it works

I agree with Zakk. Storing the value in a data attribute would be the best way to do this. Here's how I'd code it.
$(function() {
$( "#countButton" ).on( "click", function() {
var clicks = $( this ).data( "clicks" );
clicks++;
// Display the clicks.
$( "#amount" ).html( clicks );
$( this ).data( "clicks", clicks );
// Check to see if the sir button should be displayed.
if( clicks >= 20 ) {
$( "#Sir" ).css( "visibility", "visible" );
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>++ Increment</title>
</head>
<body>
<h1>Click the Button</h1>
<input type="button" id="countButton" data-clicks="0" value="Click Me!"/>
<p class="ClickCount">Clicks: <a id="amount">0</a></p>
<input type="button" id="countButton" onclick="store()" value="Store"/>
<input type="button" style="visibility: hidden;" value="Button" id="Sir" />
</body>
</html>

Your condition is outside the function hi(), so it is checked once when the file loaded, no when hi() is call.
So you may put your condition inside hi().
var count = 0;
function hi() {
count += 1;
document.getElementById("amount").innerHTML = count;
if (count >= 20) {
document.getElementById("Sir").style.visibility = "visible";
}
}

Related

How to make buttons that increment and decrement a value when clicked?

I am new to programming. Every time I run this code, nothing happens. Can you please tell me why this is?
<body>
<input type=button value="increment" onclick="button1()" />
<input type=button value="decrement" onclick="button2()" />
<script type="text/javascript">
var x = 0
document.write(x)
function button1() {
document.write(x++)
}
function button2(){
document.write(x--)
}
</script>
</body>
The problem is that you put ++ and -- after the variable, meaning that it will increment/decrement the variable after printing it. Try putting it before the variable, like below.
Also, as mentioned, you have some trouble with document.write(). Consider the following documentation from the W3Schools page:
The write() method writes HTML expressions or JavaScript code to a
document.
The write() method is mostly used for testing. If it is used after an
HTML document is fully loaded, it will delete all existing HTML.
Thus, document.write() will remove all your existing content as soon as you click on a button. If you want to write to the document, use an element's .innerHTML like this:
var x = 0;
document.getElementById('output-area').innerHTML = x;
function button1() {
document.getElementById('output-area').innerHTML = ++x;
}
function button2() {
document.getElementById('output-area').innerHTML = --x;
}
<input type=button value="increment" onclick="button1()" />
<input type=button value="decrement" onclick="button2()" />
<span id="output-area"></span>
Why don't you change your code a bit? Instead of document.write(x++) and document.write(x--) use document.write(++x) and document.write(--x).
The document.write is the problem. It only works before the browser is done loading the page completely. After that, document.write doesn't work. It just deletes all of the existing page contents.
Your first document.write is executed before you the page has loaded completely. This is why you should see the 0 next to the two buttons.
Then however, the page has loaded. Clicking on a button causes the event handler to be executed, so document.write will be called, which doesn't work at that point, because the page already has loaded completely.
document.write shouldn't be used anymore. There are many modern ways of updating the DOM. In this case, it would create a <span> element and update it's content using textContent.
Moreover, use addEventListener instead of inline event listeners:
var x = 0;
var span = document.querySelector('span'); // find the <span> element in the DOM
var increment = document.getElementById('increment'); // find the element with the ID 'increment'
var decrement = document.getElementById('decrement'); // find the element with the ID 'decrement'
increment.addEventListener('click', function () {
// this function is executed whenever the user clicks the increment button
span.textContent = x++;
});
decrement.addEventListener('click', function () {
// this function is executed whenever the user clicks the decrement button
span.textContent = x--;
});
<button id="increment">increment</button>
<button id="decrement">decrement</button>
<span>0</span>
As others have mentioned, the first x++ won't have a visible effect, because the value of x is incremented after the content of the <span> is updated. But that wasn't not your original problem.
document write will delete full html:
The write() method is mostly used for testing: If it is used after an HTML document is fully loaded, it will delete all existing HTML.
As in w3schools
try this instead
<body>
<input type=button value="increment" onclick="button1()" />
<input type=button value="decrement" onclick="button2()" />
<div id="value"></div>
<script type="text/javascript">
var x=0
var element = document.getElementById("value");
element.innerHTML = x;
function button1(){
element.innerHTML = ++x;
}
function button2(){
element.innerHTML = --x;
}
</script>
I changed the x-- and x++ to ++x and --x so the changes are immediatly. With this change your code would have worked aswell. showing 1 or -1.
HTML code for UI
<div class="card">
<div class="card-body">
<h5 class="card-title">How many guests can stay?</h5>
<div class="row">
<ul class="guestCounter">
<li data-btn-type="increment"><span class="romoveBtn"><i class="fa fa-plus"></i></span> </li>
<li class="counterText"><input type="text" name="guestCount" id="btnGuestCount" value="1" disabled /> </li>
<li data-btn-type="decrement"><span class="romoveBtn"><i class="fa fa-minus"></i></span></li>
</ul>
</div>
Java Script:
// set event for guest counter
$(".guestCounter li").on("click", function (element) {
var operationType = $(this).attr("data-btn-type");
//console.log(operationType);
var oldValue = $(this).parent().find("input").val();
//console.log(oldValue);
let newVal;
if (operationType == "increment") {
newVal = parseFloat(oldValue) + 1;
} else {
// Don't allow decrementing below zero
if (oldValue > 1) {
newVal = parseFloat(oldValue) - 1;
} else {
newVal = 1;
}
}
$(this).parent().find("input").val(newVal);
});
var x = 1;
document.getElementById('output-area').innerHTML = x;
function button1() {
document.getElementById('output-area').innerHTML = ++x;
}
function button2() {
if(x <= 0 ){
alert(' minimum value 0 // By Khaydarov Marufjon marvell_it academy uzb ')
return false ;
}
document.getElementById('output-area').innerHTML = --x;
}
input{
width: 70px;
background-color: transparent;
padding: 20px;
text-align: center;
}
button{
padding: 20px;
}
<input type='button' value="plus" onclick="button1()" />
<span id="output-area"></span>
<input type='button' value="minus" onclick="button2()" />
This question is very common. I have developed a solution with Bootstrap and pure JavaScript in another very similar thread here.
There is autoincrement input on keeping button pressed down.
Use ontouchstart and ontouchend instead than onmousedown and onmouseup method for mobile. To make it work for both mobile and desktop browser without headache use onpointerdown, onpointerup, onpointerleave
https://stackoverflow.com/a/70957862/13795525
function imposeMinMax(el) {
if (el.value != '') {
if (parseInt(el.value) < parseInt(el.min)) {
el.value = el.min;
}
if (parseInt(el.value) > parseInt(el.max)) {
el.value = el.max;
}
}
}
var index = 0;
var interval;
var timeout;
var stopFlag=false;
function clearAll(){
clearTimeout(timeout);
clearInterval(interval);
}
function modIn(el) {
var inId = el.id;
if (inId.charAt(0) == 'p') {
var targetId = inId.charAt(2);
var maxValue = Number(document.getElementById(targetId).max);
var actValue = Number(document.getElementById(targetId).value);
index = actValue;
if(actValue < maxValue){
stopFlag=false;
document.getElementById(targetId).value++;
}else{
stopFlag=true;
}
timeout = setTimeout(function(){
interval = setInterval(function(){
if(index+1 >= maxValue){
index=0;
stopFlag=true;
}
if(stopFlag==false){
document.getElementById(targetId).value++;
}
index++;
}, 100);
}, 500);
imposeMinMax(document.getElementById(targetId));
}
if (inId.charAt(0) == 'm') {
var targetId = inId.charAt(2);
var minValue = Number(document.getElementById(targetId).min);
var actValue = Number(document.getElementById(targetId).value);
index = actValue;
if(actValue > minValue){
stopFlag=false;
document.getElementById(targetId).value--;
}else{
stopFlag=true;
}
timeout = setTimeout(function(){
interval = setInterval(function(){
if(index-1 <= minValue){
index=0;
stopFlag=true;
}
if(stopFlag==false){
document.getElementById(targetId).value--;
}
index--;
}, 100);
}, 500);
imposeMinMax(document.getElementById(targetId));
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Button example</title>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<button type='button' class='btn btn-danger btn-sm ' id='mbA' onmousedown='modIn(this)' onmouseup='clearAll()' onmouseleave='clearAll()'>-</button>
<input type='number' id='A' onchange='imposeMinMax(this)' value='200' max='350' min='150' step='1' style='width: 50px;'>
<button type='button' class='btn btn-danger btn-sm ' id='pbA' onmousedown='modIn(this)' onmouseup='clearAll()' onmouseleave='clearAll()'>+</button>
<button type='button' class='btn btn-danger btn-sm signBut' id='mbB' onmousedown='modIn(this)' onmouseup='clearAll()' onmouseleave='clearAll()'>-</button>
<input type='number' id='B' onchange='imposeMinMax(this)' value='250' max='450' min='150' step='1' style='width: 50px;'>
<button type='button' class='btn btn-danger btn-sm ' id='pbB' onmousedown='modIn(this)' onmouseup='clearAll()' onmouseleave='clearAll()'>+</button> 
<button type='button' class='btn btn-danger btn-sm signBut' id='mbC' onmousedown='modIn(this)' onmouseup='clearAll()' onmouseleave='clearAll()'>-</button>
<input type='number' id='C' onchange='imposeMinMax(this)' value='3' max='10' min='1' step='1' style='width: 50px;'>
<button type='button' class='btn btn-danger btn-sm ' id='pbC' onmousedown='modIn(this)' onmouseup='clearAll()' onmouseleave='clearAll()'>+</button>
</body>
</html>

javascript function on multiple buttons

I have three buttons. I would like them to change colour when pressed, and back to no colour when pressed again.
I found this code on stackoverflow that allows me to almost do it however, it only works on one button, the other two are not affected.Also, when I pressed one of the other two buttons, the first button changes colour. I tried changing ID's on the buttons, adding another script with different getElementById() ID's but nothing works.
Do I need more than one function to achieve what I want?
The code I am using is below.
var count = 1;
function setColor(btn, color) {
var property = document.getElementById(btn);
if (count == 0) {
property.style.backgroundColor = "#FFFFFF";
count = 1;
} else {
property.style.backgroundColor = "#E68352";
count = 0;
}
}
<head>
<link rel="stylesheet" type="text/css" href="styles/main.css"/>
</head>
<body>
<input type="button" id="button" value = "A-D" style= "color:black" onclick="setColor('button', '#101010')";/>
<input type="button" id="button" value = "E-H" style= "color:black" onclick="setColor('button', '#101010')";/>
<input type="button" id="button" value = "E-H" style= "color:black" onclick="setColor('button', '#101010')";/>
</body>
Usually, when you write inline event handler you may take advantage of:
this: current element: When code is called from an in–line on-event handler, its this is set to the DOM element on which the listener is placed:
event: event element object
Therefore, change:
onclick="setColor('button', '#101010')"
with:
onclick="setColor(this, event, '#101010')"
So your code can be rewritten as:
function hexToRgb(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? 'rgb(' +
parseInt(result[1], 16) + ', ' +
parseInt(result[2], 16) + ', ' +
parseInt(result[3], 16) + ')'
: null;
}
function setColor(btnEle, evt, color) {
if (btnEle.style.backgroundColor == hexToRgb("#E68352")) {
btnEle.style.backgroundColor = "#FFFFFF"
}
else {
btnEle.style.backgroundColor = "#E68352"
}
}
<input type="button" id="button1" value = "A-D" style= "color:black" onclick="setColor(this, event, '#101010')";/>
<input type="button" id="button2" value = "E-H" style= "color:black" onclick="setColor(this, event, '#101010')";/>
<input type="button" id="button3" value = "E-H" style= "color:black" onclick="setColor(this, event, '#101010')";/>
You should have uniques ID
You can use classList.toggle("yourClass") instead of using a count
var buttons = document.getElementsByClassName("button");
for (let i = 0, l = buttons.length; i < l; i++) {
buttons[i].addEventListener('click', function() {
buttons[i].classList.toggle('active');
})
}
.active {
background-color: #E68352 !important;
}
.button {
background-color: #FFFFFF;
}
<input type="button" id="button1" class="button" value="A-D" />
<input type="button" id="button2" class="button" value="E-H" />
<input type="button" id="button3" class="button" value="E-H" />
Set a class on the buttons, and then loop through the buttons and add an event listener to each of them:
EDIT: I see you are using an onclick handler, which I didn't notice at first; so this answer might not be as useful as I thought. You should definitely use different IDs though if you use that approach.
<button class="button" ... >
var buttons = document.getElementsByClassName('button')
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', function() {
// Do your button things.
})
}
IDs should be unique inside the document. Like this:
<input type="button" id="button1" value="A-D" style="color:black" onclick="setColor('button1', '#101010')" ;/>
<-- here ^ here ^ -->
<input type="button" id="button2" value="E-H" style="color:black" onclick="setColor('button2', '#101010')" ;/>
<-- here ^ here ^ -->
<input type="button" id="button3" value="E-H" style="color:black" onclick="setColor('button3', '#101010')" ;/>
<-- here ^ here ^ -->
<!DOCTYPE html>
<html>
<head>
<script>
var count = 1;
function setColor(btn, color) {
var property = document.getElementById(btn);
if (count == 0) {
property.style.backgroundColor = "#FFFFFF"
count = 1;
} else {
property.style.backgroundColor = "#E68352"
count = 0;
}
}
</script>
<link rel="stylesheet" type="text/css" href="styles/main.css" />
</head>
<body>
<input type="button" id="button1" value="A-D" style="color:black" onclick="setColor('button1', '#101010')" ;/>
<input type="button" id="button2" value="E-H" style="color:black" onclick="setColor('button2', '#101010')" ;/>
<input type="button" id="button3" value="E-H" style="color:black" onclick="setColor('button3', '#101010')" ;/>
</body>
</html>
IDs need to be unique but you do not need them here
Give the buttons a class and use toggle the classList
window.onload=function() {
var buts = document.querySelectorAll(".but");
for (var i=0;i<buts.length;i++) {
buts[i].onclick=function() {
this.classList.toggle("clicked");
}
}
}
.but {background-color:black}
.clicked { background-color:#E68352; }
<input type="button" value="A-D" class="but" />
<input type="button" value="E-F" class="but" />
<input type="button" value="G-H" class="but" />
dont use numbers, use this instead
http://codepen.io/animhotep/pen/qRwjeX?editors=0010
var count = 1;
function setColor(btn, color) {
if (count == 0) {
btn.style.backgroundColor = "#FFFFFF"
count = 1;
}
else {
btn.style.backgroundColor = "#E68352"
count = 0;
}
}
Roberto, as Ibrahim correctly pointed out, the problem is that you are using the same ID for all buttons. When javascript executes this code:
var property = document.getElementById(btw);
it will always return the first element with the ID specified. One solution is choosing a different ID for each button and updating the corresponding onclick code. Another solution could be the one below, in which you do not need to specify IDs at all and the function setColor could be used for any element.
<!DOCTYPE html>
<html>
<head>
<script>
var count = 1;
function setColor(element, color) {
if (count == 0) {
el.style.backgroundColor = "#FFFFFF"
count = 1;
}
else {
el.style.backgroundColor = "#E68352"
count = 0;
}
}
</script>
<link rel="stylesheet" type="text/css" href="styles/main.css"/>
</head>
<body>
<input type="button" value = "A-D" style= "color:black" onclick="setColor(this, '#101010')";/>
<input type="button" value = "E-H" style= "color:black" onclick="setColor(this, '#101010')";/>
<input type="button" value = "E-H" style= "color:black" onclick="setColor(this, '#101010')";/>
</body>
</html>
Note the use of the this variable as the first argument for setColor. In each of the buttons, the corresponding this will point to the element where it is defined.
Hope it helps.
You just need little bit of modification.
See the working code.
function setColor(btn, color) {
var elem = document.getElementById(btn);
if (elem.hasAttribute("style")) {
if (elem.getAttribute("style").indexOf("background-color:") == -1) {
elem.style.backgroundColor = color;
} else {
elem.style.backgroundColor = "";
}
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles/main.css" />
</head>
<body>
<input type="button" id="button1" value="A-D" style="color:black" onclick="setColor('button1', '#E68352')" ;/>
<input type="button" id="button2" value="E-H" style="color:black" onclick="setColor('button2', '#E68352')" ;/>
<input type="button" id="button3" value="E-H" style="color:black" onclick="setColor('button3', '#E68352')" ;/>
</body>
</html>

I am trying to convert Fahrenheit to Celsius but it's not working what am i doing wrong? - Javascript (needs to have a form and a clear button)

<html>
<head>
<title>
Form
</title>
</head>
<body>
<script type="text/javascript">
function calculate (form)
{
cel = fah * 0.5555 - 32;
document.getElementById("finish").innerHTML = cel;
}
</script>
<form name="myform" action="" method="get"> Turn Fahrenheit to Celsius! <br>
<input type="number" name="fah">
<input type="button" name="button" value="calculate" onClick="calculate(this.form)">
<button type="reset" value="Reset">Reset</button>
</form>
<p id="finish">°C</p>
</body>
</html>
Edit1: Moved the inner.HTML into the Function
So the reset button is the only thing that works. Is it possible to calculate the math this way?
You asked a question on how to create a pizza form a while ago and you deleted it soon as it was down voted a few times.
The point to note here is, it is okay if a few people dislike your question. You've joined StackExchange not to gain points but to learn a few things. Your question could be helpful to a lot of others out there in this world. So here it is the answer to your pizza question
<html>
<body>
<p>A pizza is 13 dollars with no toppings.</p>
<form action="form_action.asp">
<input type="checkbox" name="pizza" value="Pepperoni" id="pep">Pepperoni + 5$<br>
<input type="checkbox" name="pizza" value="Cheese" id="che">Cheese + 4$<br>
<br>
<input type="button" onclick="myFunction()" value="Send order">
<input type="button" onclick="cost()" value="Get cost">
<br><br>
<input type="text" id="order" size="50">
</form>
<script>
function myFunction() {
var pizza = document.forms[0];
var txt = "";
var i;
for (i = 0; i < pizza.length; i++) {
if (pizza[i].checked) {
txt = txt + pizza[i].value + " ";
}
}
document.getElementById("order").value = "You ordered a pizza with: " + txt;
}
function cost() {
var pep = 5;
var che = 4;
var pizza = 13;
var total = 0;
if (document.getElementById("pep").checked === true) {
total += pep;
}
if (document.getElementById("che").checked === true) {
total += che;
}
document.getElementById("order").value = "The cost is : " + total;
}
</script>
</body>
</html>
Thanks. I hope this helps you.
Adeno Fixed it by declaring what fah was. you can also see your errors with f12.
https://stackoverflow.com/users/965051/adeneo
<html>
<head>
<title>
Form
</title>
</head>
<body>
<script type="text/javascript">
function calculate(form) {
var cel = (document.getElementById("fah").value -32) * 5 / 9;
document.getElementById("finish").innerHTML = cel;
}
</script>
<form name="myform" action="" method="get"> Turn Fahrenheit to Celsius!
<br>
<input type="number" name="fah" id="fah">
<input type="button" name="button" value="calculate" onClick="calculate(this.form)">
<button type="reset" value="Reset">Reset</button>
</form>
<p id="finish">°C</p>
</body>
You never get the value from the input type = "number"
Try this
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script>
function calculate()
{
var fah = document.getElementById('fah').value;
var cel = parseFloat(fah * 0.5555 - 32);
document.getElementById("finish").innerHTML = cel;
}
</script>
</head>
<body>
<form>
Turn Fahrenheit to Celsius! <br>
<input type="text" name="fah" id="fah">
<input type="button" name="button" value="calculate" onClick="calculate()">
<button type="reset" value="Reset">Reset</button>
</form>
<p id="finish">°C</p>
</body>
</html>
Couple things: You need to set the innerhtml from within the function because the variable is in the function. Or you could have declared the variable outside the function first like var fah = "" then the function. But since you declared it in the function only the function can see it. So i moved the innerhtml set into the function.
Also, javascript likes to use id's not name = "fah" You can call an element by name but id is easier.
i rounded it to integer. you would get 9 decimals your way.
Lastly, innerhtml set clears all the html so you would lose the °C the way you had it.
<html>
<head>
<title>
Form
</title>
</head>
<body>
<script type="text/javascript">
function calculate (form)
{
var fah = this.fah.value;
cel = Math.round((fah-32) / 1.8);
document.getElementById("finish").innerHTML = cel+"°C";
}
</script>
<form name="myform" action="" method="get"> Turn Fahrenheit to Celsius! <br>
<input type="number" name="fah" id = "fah">
<input type="button" name="button" value="calculate" onClick="calculate(this.form)">
<button type="reset" value="Reset">Reset</button>
</form>
<p id="finish"></p>
</body>
</html>

How to find the greatest value of elements in this kind of Array?

I am looking for correct code so function named "finder()" can execute and find the highest value in Array named "sum" .
When press "Find max" button result is :"[object HTMLInputElement] "
Thank you for any help!
Here is code:
<html>
<head>
<title>Max</title>
<meta charset="utf-8">
<script type="text/javascript">
var sum = document.getElementsByName('addends');
function add() {
var x = document.getElementById('apendiks');
x.innerHTML+="<br/><input type='text' name='addends' size='7'>";
}
function finder() {
var max = sum[0];
for(i=0; i<sum.length;i++){
if(sum[i] > max){
max = sum[i];
}
}
document.getElementById('showMaxValue').innerHTML = max;
}
function gather() {
var total=0;
for(i=0; i < sum.length; i++){
total+=parseFloat(sum[i].value);
}
document.getElementById('score').innerHTML = total;
}
</script>
</head>
<body>
<p><input type="button" onclick="add()" value="Add a new box"> </p>
<p><input type="button" onclick="" value="-"> </p>
<div id="apendiks"></div>
<p><input type="button" onclick="gather()" value="Total sum"> </p>
<p>Score: <b id="score"></b></p>
<p><input type="button" onclick="finder()" value="Find max"> </p>
<p id="showMaxValue"></p>
</body>
</html>
var sum = document.getElementsByName('addends');
This line will give you a list of Nodes, not an Array.
In your finder method, you need to treat it as such
function finder()
{
var max = paeseInt(sum[0].value) ;
for(i=0; i<sum.length;i++){
if(parseInt(sum[i].value) > max && !isNaN(sum[i].value)){ //assuming that strings should be ignored
max = parseInt(sum[i].value) ;
}
}
document.getElementById('showMaxValue').innerHTML = max;
}
Use .value to get the value of input field
<html>
<head>
<title>Max</title>
<meta charset="utf-8">
<script type="text/javascript">
var sum = document.getElementsByName('addends');
function add() {
var x = document.getElementById('apendiks');
x.innerHTML+="<br/><input type='text' name='addends' size='7'>";
}
function finder() {
var max = sum[0].value;
for(i=0; i<sum.length;i++){
if(sum[i].value > max){
max = sum[i].value;
}
}
document.getElementById('showMaxValue').innerHTML = max;
}
function gather() {
var total=0;
for(i=0; i < sum.length; i++){
total+=parseFloat(sum[i].value);
}
document.getElementById('score').innerHTML = total;
}
</script>
</head>
<body>
<p><input type="button" onclick="add()" value="Add a new box"> </p>
<p><input type="button" onclick="" value="-"> </p>
<div id="apendiks"></div>
<p><input type="button" onclick="gather()" value="Total sum"> </p>
<p>Score: <b id="score"></b></p>
<p><input type="button" onclick="finder()" value="Find max"> </p>
<p id="showMaxValue"></p>
</body>
</html>

there are two html pages. I want the data status of first pages to saved when I reverting from next page to first page

When I click on back button of next page the check box value should not be reset.
It should be same as I checked or unchecked. The code from the first and next page is below.
First Page
<!DOCTYPE html>
<html>
<body>
<form>
<input type="checkbox" name="code" value="ECE">ECE<br>
<input type="checkbox" name="code" value="CSE">CSE<br>
<input type="checkbox" name="code" value="ISE">ISE<br>
<br>
<input type="button" onclick="dropFunction()" value="save">
<br><br>
<script>
function dropFunction() {
var branch = document.getElementsByName("code");
var out = "";
for (var i = 0; i < branch.length; i++) {
if (branch[i].checked == true) {
out = out + branch[i].value + " ";
window.location.href="next.html";
}
}
}
</script>
</form>
</body>
</html>
Next Page
<html>
<head>
<title>Welcome to </title>
</head>
<body color="yellow" text="blue">
<h1>welcome to page</h1>
<h2>here we go </h2>
<p> hello everybody<br></p>
</body>
<image src="D:\images.jpg" width="300" height="200"><br>
<button onclick="goBack()">Go Back</button>
<script>
function goBack() {
window.location.href="first.html";
}
</script>
</body>
</html>
Full solution: example. First add ids to your checkboxes:
<input type="checkbox" name="code" value="ECE" id='1'>ECE<br>
<input type="checkbox" name="code" value="CSE" id='2'>CSE<br>
<input type="checkbox" name="code" value="ISE" id='3'>ISE<br>
<input id="spy" style="visibility:hidden"/>
Then change your dropFunction:
function dropFunction() {
var branch = document.getElementsByName("code");
var out = "";
localStorage.clear();
for (var i = 0; i < branch.length; i++)
if (branch[i].checked == true)
localStorage.setItem(branch[i].id, true);
for (var i = 0; i < branch.length; i++) {
if (branch[i].checked == true) {
out = out + branch[i].value + " ";
window.location.href="next.html";
}
}
}
And add some new javascript code to first.html:
window.onload = function() {
var spy = document.getElementById("spy");
if(spy.value=='visited')
for(var i=1;i<=3;i++)
if(localStorage.getItem(i))
document.getElementById(i).checked=true;
spy.value = 'visited';
}

Categories