We Keep Coding

Is there a way to reset the saved check box values in JavaScript or Jquery?

So I am currently working on a Yahtzee project and while I can get my functions up to now to work. I am having issues with resetting the checked values because even when I reset the game, the checked dice are still saved until I refresh the page. How can I fix this/get this to work?
I have provided my code up till now.
let dice = [{
'img': "Die1.PNG",
'value': 1
},
{
'img': "Die2.PNG",
'value': 2
},
{
'img': "Die3.PNG",
'value': 3
},
{
'img': "Die4.PNG",
'value': 4
},
{
'img': "Die5.PNG",
'value': 5
},
{
'img': "Die6.PNG",
'value': 6
}
]
let checkedDice = [{
'dice': 0,
'checked': false,
'id': "die1"
},
{
'dice': 0,
'checked': false,
'id': "die2"
},
{
'dice': 0,
'checked': false,
'id': "die3"
},
{
'dice': 0,
'checked': false,
'id': "die4"
},
{
'dice': 0,
'checked': false,
'id': "die5"
},
{
'dice': 0,
'checked': false,
'id': "die6"
},
]
var turns = 9;
var rollsRem = 3;
var wins = 0;
var losses = 0;
const winPoints = 200;
// Function that will roll dice
function roll() {
if (rollsRem > 0) {
for (let i = 0; i < checkedDice.length; i++) {
if (checkedDice[i].checked == false) {
let rollDice = Math.floor(Math.random() * 6);
document.getElementById(checkedDice[i].id).innerHTML = `<img src="${dice[rollDice].img}" width='45px'>`;
}
}
rollsRem--;
var display = document.getElementById("rollsRem");
display.innerHTML = rollsRem;
} else {
alert("u gotta do somethin else")
for (let j = 0; j < checkedDice.length; j++) {
// userDice[j].checked = false;
// rollsLeft = 3;
}
}
}
$(document).ready(function() {
reset();
function reset() {
roll();
}
$("#reset").click(function() {
alert("reset this");
rollsRem = 3;
var display = document.getElementById("rollsRem");
display.innerHTML = rollsRem;
roll();
$('input[type=checkbox]:checked').each(function() {
$(this).prop('checked', false);
});
});
$("#cdie1").click(function() {
checkedDice[0] = !checkedDice[0];
})
$("#cdie2").click(function() {
checkedDice[1] = !checkedDice[1];
})
$("#cdie3").click(function() {
checkedDice[2] = !checkedDice[2];
})
$("#cdie4").click(function() {
checkedDice[3] = !checkedDice[3];
})
$("#cdie5").click(function() {
checkedDice[4] = !checkedDice[4];
})
$("#cdie6").click(function() {
checkedDice[5] = !checkedDice[5];
});
});
body {
display: grid;
grid-template-areas: "header";
background-color: black;
}
#pageHeader {
grid-area: header;
}
header {
background: black;
}
header h1 {
font-family: Verdana;
font-size: 32px;
color: white;
}
.nav-pills>li.active>a,
.nav-pills>li.active>a:focus {
color: black;
background-color: #f80000;
}
.nav-pills>li.active>a:hover {
background-color: #f80000;
color: black;
}
th,
td {
border-style: solid;
border-color: white;
font-family: "Arial Rounded MT Bold";
font-weight: bolder;
border-width: 2px;
color: white;
}
#scoreCard {
right: 500px;
top: 150px;
border-style: solid;
border-color: black;
font-family: "Arial Rounded MT Bold";
font-weight: bolder;
width: 300px;
}
#yourRoll {
color: white;
}
div h2 img {
color: white;
float: right;
padding-right: 150px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
</style>
<script>
</script>
<div class="container">
<header id="pageHeader">
<h1> <img src="yahtzee.jpg" width="100px"> YAHTZEE </h1>
</header>
<ul class="nav nav-pills red">
<li class="active"> Color Scheme </li>
</ul>
<br>
<div class="container">
<div class="row">
<div class="col-sm">
<table id="scoreCard">
<br>
<br>
<span style="color:white;"> <strong> SCORE BOARD </strong> </span>
<br>
<tr>
<th> Win Points </th>
<th> 200</th>
</tr>
<tr>
<td> Wins </td>
<td> 0 </td>
</tr>
<tr>
<td> Losses </td>
<td> 0 </td>
</tr>
</table>
</div>
<div class="col-sm">
<table>
<tr>
<th>Upper Section</th>
<th>How to Score</th>
<th>Game #1</th>
</tr>
<tr>
<td> ACE <img src="Die1.PNG" width="45px"> = 1 </td>
<td> COUNT AND ADD ONLY ACES </td>
<td></td>
</tr>
<tr>
<td> TWOS <img src="Die2.PNG" width="45px"> = 2 </td>
<td> COUNT AND ADD ONLY TWOS </td>
<td></td>
</tr>
<tr>
<td> THREES <img src="Die3.PNG" width="45px"> = 3</td>
<td> COUNT AND ADD ONLY THREES</td>
<td></td>
</tr>
<tr>
<td> FOURS <img src="Die4.PNG" width="45px"> = 4 </td>
<td> COUNT AND ADD ONLY FOURS </td>
<td></td>
</tr>
<tr>
<td> FIVES <img src="Die5.PNG" width="45px"> = 5</td>
<td>COUNT AND ADD ONLY FIVES</td>
<td></td>
</tr>
<tr>
<td> SIXES <img src="Die6.PNG" width="45px"> = 6 </td>
<td> COUNT AND ADD ONLY SIXES </td>
<td></td>
</tr>
<tr>
<td> 3 OF A KIND </td>
<td> ADD TOTAL OF ALL DICE </td>
<td></td>
</tr>
<tr>
<td> 4 OF A KIND </td>
<td> ADD TOTAL OF ALL DICE </td>
<td></td>
</tr>
<tr>
<td> FULL HOUSE </td>
<td> SCORE 25 </td>
<td></td>
</tr>
<tr>
<td style="font-size: 30px"> TOTAL SCORE </td>
<td> <img src="whitearrow.png" width="100px"> </td>
<td></td>
</tr>
<tr>
<td style="font-size: 30px"> BONUS w/ total score </td>
<td style="font-size: 30px"> SCORE 35 </td>
<td></td>
</tr>
<tr>
<td style="font-size: 30px"> TOTAL </td>
<td> <img src="whitearrow.png" width="100px"> </td>
<td></td>
</tr>
</table>
</div>
<div id="yourRoll" class="col-sm">
<h2 style="color: white"> Your Roll </h2>
<div id="die1">
<img src="Die1.PNG" width="45px">
</div>
Die 1 <input type="checkbox" name="options" id="cdie1" />
<div id="die2">
<img src="Die2.PNG" width="45px">
</div>
Die 2 <input type="checkbox" name="options" id="cdie2" />
<div id="die3">
<img src="Die3.PNG" width="45px">
</div>
Die 3 <input type="checkbox" name="options" id="cdie3" />
<div id="die4">
<img src="Die4.PNG" width="45px">
</div>
Die 4 <input type="checkbox" name="options" id="cdie4" />
<div id="die5">
<img src="Die5.PNG" width="45px">
</div>
Die 5 <input type="checkbox" name="options" id="cdie5" />
<div id="die6">
<img src="Die6.PNG" width="45px">
</div>
Die 6 <input type="checkbox" name="options" id="cdie6" />
<br>
<div>
</br>
<!-- TODO: Fix the Rolls Left Counter -->
<p> Rolls Left: <span id="rollsRem"> 2 </span></p>
</br>
<button type="button" id="rollbutt" onclick="roll();" style="color: black"> Roll Button </button>
</br>
<button style="color: black" type="button" id="reset"> Reset </button>
</div>
</div>
</div>
</div>
</div>

use "autocomplete" attribute to avoid saved states after page refreshing
<input type="checkbox" autocomplete="off">

JQuery - Delete table row if delete button is clicked

I'm creating a basic database that's intended to only be stored in memory as practice in Javascript. Each new row gets it own corresponding delete and edit buttons. My problem now is how to get these delete buttons to work, that when you click on one it deletes it's row. Here is my code at this moment:
Javascript
function onload(){
$("#addbutton").on("click",addRow);
$(".delete").onclick(function(){
$(this).closest('tr').remove();
});
var i = 1;
function addRow(){
var newRow = "<tr rowID='" + i + "'>"+"<td><div>"+$("#namebox").val()+
"</div></td>"+"<td><div>"+$("#surnamebox").val()+"</div></td>"+"<td><div>"+$("#agebox").val()+"<td><div><button id='" + i + "' class='delete' name='delete'type='button'>DELETE</button></div></td>"+"<td><div><button class='edit' name='edit'type='button'>EDIT</button></div></td><td><p>"+ i + "</p></td></tr>"; //Adds the row with content and
// buttons
$(newRow).appendTo("#maintable"); //Append the new row
// to the table
// Next three commands clear the input boxes
$("#namebox").val('');
$("#surnamebox").val('');
$("#agebox").val('');
// Add to the numer of rows in the table
i++;
}// addRow END
};
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Memory-Only Database</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-
ui.min.js"></script>
</head>
<body onload="onload()">
<div id="header">
<h2>Memory-Only Database</h2>
</div>
<div id="input-table">
<table id="maintable" style="width: 60%">
<tr>
<th>Name</th>
<th>Surname</th>
<th>Age</th>
<th id="buttons1">buttons1</th>
<th id="buttons2">buttons2</th>
<th id="counter">counter</th>
</tr>
<tr>
<td>
<input id="namebox" name="name" type="text" value="">
</td>
<td>
<input id="surnamebox" name="surname" type="text" value="">
</td>
<td>
<input id="agebox" name="age" type="number" value="">
</td>
<td>
<button id="addbutton" name="add" type="button">ADD</button>
</td>
</tr>
</table>
</div>
</body>
</html>
CSS
body{
background-color: darkcyan;
}
div#header{
position: relative;
left: 30em;
width: 18em;
text-align: center;
}
div#input-table{
width:50em;
}
table,th,tr,td{
border: 1px solid black;
border-collapse: collapse;
}
td{
text-align: center;
}
th#buttons{
width: inherit;
}

There is no onclick method in jQuery, use click instead.
$(".delete").click(function() {
$(this).closest("tr").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Row 1</td>
<td><button class="delete">Del</button></td>
</tr>
<tr>
<td>Row 2</td>
<td><button class="delete">Del</button></td>
</tr>
<tr>
<td>Row 3</td>
<td><button class="delete">Del</button></td>
</tr>
</table>

You should use event delegation for delete button. since you are adding button dynamically.
$(document).on("click",'.delete',function(){
$(this).closest('tr').remove();
});
function onload(){
$("#addbutton").on("click",addRow);
var i = 1;
function addRow(){
var newRow = "<tr rowID='" + i + "'>"+"<td><div>"+$("#namebox").val()+
"</div></td>"+"<td><div>"+$("#surnamebox").val()+"</div></td>"+"<td><div>"+$("#agebox").val()+"<td><div><button id='" + i + "' class='delete' name='delete'type='button'>DELETE</button></div></td>"+"<td><div><button class='edit' name='edit'type='button'>EDIT</button></div></td><td><p>"+ i + "</p></td></tr>";
//Adds the row with content and
// buttons
$(newRow).appendTo("#maintable"); //Append the new row
// to the table
// Next three commands clear the input boxes
$("#namebox").val('');
$("#surnamebox").val('');
$("#agebox").val('');
// Add to the numer of rows in the table
i++;
}// addRow END
};
$(document).on("click",'.delete',function(){
$(this).closest('tr').remove();
});
body{
background-color: darkcyan;
}
div#header{
position: relative;
left: 30em;
width: 18em;
text-align: center;
}
div#input-table{
width:50em;
}
table,th,tr,td{
border: 1px solid black;
border-collapse: collapse;
}
td{
text-align: center;
}
th#buttons{
width: inherit;
}
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-
ui.min.js"></script>
</head>
<body onload="onload()">
<div id="header">
<h2>Memory-Only Database</h2>
</div>
<div id="input-table">
<table id="maintable" style="width: 60%">
<tr>
<th>Name</th>
<th>Surname</th>
<th>Age</th>
<th id="buttons1">buttons1</th>
<th id="buttons2">buttons2</th>
<th id="counter">counter</th>
</tr>
<tr>
<td>
<input id="namebox" name="name" type="text" value="">
</td>
<td>
<input id="surnamebox" name="surname" type="text" value="">
</td>
<td>
<input id="agebox" name="age" type="number" value="">
</td>
<td>
<button id="addbutton" name="add" type="button">ADD</button>
</td>
</tr>
</table>
</div>

Another way you can delete row .... during adding new row give that row an id and call an onclick function during delete.
function deleterow(id){
$("#newrow-"+id+"").remove();
}
function onload(){
$("#addbutton").on("click",addRow);
var i = 1;
function addRow(){
var newRow = "<tr id='newrow-"+i+"'>"+"<td><div>"+$("#namebox").val()+
"</div></td>"+"<td><div>"+$("#surnamebox").val()+"</div></td>"+"<td><div>"+$("#agebox").val()+"<td><div><button id='" + i + "' class='delete' name='delete' type='button' onclick='deleterow("+i+")'>DELETE</button></div></td>"+"<td><div><button class='edit' name='edit'type='button' >EDIT</button></div></td><td><p>"+ i + "</p></td></tr>"; //Adds the row with content and
// buttons
$(newRow).appendTo("#maintable"); //Append the new row
// to the table
// Next three commands clear the input boxes
$("#namebox").val('');
$("#surnamebox").val('');
$("#agebox").val('');
// Add to the numer of rows in the table
i++;
}// addRow END
};
body{
background-color: darkcyan;
}
div#header{
position: relative;
left: 30em;
width: 18em;
text-align: center;
}
div#input-table{
width:50em;
}
table,th,tr,td{
border: 1px solid black;
border-collapse: collapse;
}
td{
text-align: center;
}
th#buttons{
width: inherit;
}
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-
ui.min.js"></script>
</head>
<body onload="onload()">
<div id="header">
<h2>Memory-Only Database</h2>
</div>
<div id="input-table">
<table id="maintable" style="width: 60%">
<tr>
<th>Name</th>
<th>Surname</th>
<th>Age</th>
<th id="buttons1">buttons1</th>
<th id="buttons2">buttons2</th>
<th id="counter">counter</th>
</tr>
<tr>
<td>
<input id="namebox" name="name" type="text" value="">
</td>
<td>
<input id="surnamebox" name="surname" type="text" value="">
</td>
<td>
<input id="agebox" name="age" type="number" value="">
</td>
<td>
<button id="addbutton" name="add" type="button">ADD</button>
</td>
</tr>
</table>
</div>

Randomly assign different names to each Table Cell

So I have a program which randomly assigns a name to each cell in the first row of my table from a list of names in a text box with the click of a button, what I want to do is assign different names to each of the cells in the textbox in the click of a button so that no two cells have the same name, here is my code so far:
var rnd = function() {
var things;
things = document.getElementById('things').value;
things = things.replace(', ', ',');
things = things.split(',');
setTimeout(function() {
var list = document.querySelectorAll('.js-result');
for (var index = 0; index < list.length; index++) {
var thing = Math.floor(Math.random() * things.length);
list.item(index).innerHTML = things[thing];
}
}, 500);
};
fieldset input {
display: block;
}
.result {
border: solid 1px black;
background: #e0e0e0;
padding: 1em;
margin: 1em 0;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 75%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
text-align: center
}
tr:nth-child(even) {
background-color: #dddddd;
}
<table align="center">
<thead>
<tr>
<th></th>
<th>Black</th>
<th>Blue</th>
<th>B & B</th>
<th>Gold</th>
<th>Green</th>
<th>Gryphons</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<form method="get" action="/" onsubmit="return false;">
<fieldset>
<label>
<textarea style="width: 400px;height: 35px;" name="things" id="things">Forrest Gump, Tim Thomas, Pamila Henryson, Lotus Hobbes, Jerry Sparks, Kenneth Ingham</textarea>
</label>
</fieldset>
<p>
<input type="button" value="Pick one!" onclick="rnd();">
</p>
</form>
</td>
<td>
<div class="js-result result"></div>
</td>
<td>
<div class="js-result result"></div>
</td>
<td>
<div class="js-result result"></div>
</td>
<td>
<div class="js-result result"></div>
</td>
<td>
<div class="js-result result"></div>
</td>
<td>
<div class="js-result result"></div>
</td>
</tr>
</tbody>
</table>

Instead of accessing the array element you can very well mutate it using things.splice(thing,1) - see demo below:
var rnd = function() {
var things;
things = document.getElementById('things').value;
things = things.replace(', ', ',');
things = things.split(',');
setTimeout(function() {
var list = document.querySelectorAll('.js-result');
for (var index = 0; index < list.length; index++) {
var thing = Math.floor(Math.random() * things.length);
list.item(index).innerHTML = things.splice(thing,1);
}
}, 500);
};
fieldset input {
display: block;
}
.result {
border: solid 1px black;
background: #e0e0e0;
padding: 1em;
margin: 1em 0;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 75%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
text-align: center
}
tr:nth-child(even) {
background-color: #dddddd;
}
<table align="center">
<thead>
<tr>
<th></th>
<th>Black</th>
<th>Blue</th>
<th>B & B</th>
<th>Gold</th>
<th>Green</th>
<th>Gryphons</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<form method="get" action="/" onsubmit="return false;">
<fieldset>
<label>
<textarea style="width: 400px;height: 35px;" name="things" id="things">Forrest Gump, Tim Thomas, Pamila Henryson, Lotus Hobbes, Jerry Sparks, Kenneth Ingham</textarea>
</label>
</fieldset>
<p>
<input type="button" value="Pick one!" onclick="rnd();">
</p>
</form>
</td>
<td>
<div class="js-result result"></div>
</td>
<td>
<div class="js-result result"></div>
</td>
<td>
<div class="js-result result"></div>
</td>
<td>
<div class="js-result result"></div>
</td>
<td>
<div class="js-result result"></div>
</td>
<td>
<div class="js-result result"></div>
</td>
</tr>
</tbody>
</table>

One way to do this is using the unique things array. This can be done by using the filter function on the array and passing in a predicate which checks for the uniqueness.
let uniqueThings = things.filter((currentValue, index, array) => array.indexOf(currentValue) === index); ;
list.item(index).innerHTML = uniqueThings[index];
Complete Code:
var rnd = function () {
var things;
things = document.getElementById('things').value;
things = things.replace(', ', ',');
things = things.split(',');
setTimeout(function () {
var list = document.querySelectorAll('.js-result');
for (var index = 0; index < list.length; index++) {
var thing = Math.floor(Math.random() * things.length);
let uniqueThings = things.filter((currentValue, index, array) => array.indexOf(currentValue) === index); ;
list.item(index).innerHTML = uniqueThings[index];
}
}, 500);
};
margin: 1em 0;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 75%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
text-align: center
}
tr:nth-child(even) {
background-color: #dddddd;
}
<table align="center">
<thead>
<tr>
<th></th>
<th>Black</th>
<th>Blue</th>
<th>B & B</th>
<th>Gold</th>
<th>Green</th>
<th>Gryphons</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<form method="get" action="/" onsubmit="return false;">
<fieldset>
<label>
<textarea style="width: 400px;height: 35px;" name="things" id="things">Forrest Gump, Tim Thomas, Pamila Henryson, Lotus Hobbes, Jerry Sparks, Kenneth Ingham</textarea>
</label>
</fieldset>
<p>
<input type="button" value="Pick one!" onclick="rnd();">
</p>
</form>
</td>
<td><div class="js-result result"></div></td>
<td><div class="js-result result"></div></td>
<td><div class="js-result result"></div></td>
<td><div class="js-result result"></div></td>
<td><div class="js-result result"></div></td>
<td><div class="js-result result"></div></td>
</tr>
</tbody>
</table>

The display block and none is changing the table indentation

I have the below code. The "With Inventory Data" row visibility is dependent on what we select in the dropdown of Product Type. If we select Linux from dropdown, the "With Inventory Data" row gets hidden. Changing it back to Windows in the dropdown leads to show the "With Inventory Data" row. But here the Yes, No radio button are going below the text "With Inventory Data". This needs to be positioned as it was positioned when the page is loaded. Please help
var flag = 1;
function showHide() {
if (flag == 1) {
document.getElementById('warning').style.display = "none";
document.getElementById('inventoryCol1').style.display = "none";
document.getElementById('inventoryCol2').style.display = "none";
flag=0;
}
else {
document.getElementById('warning').style.display = "block";
document.getElementById('inventoryCol1').style.display = "block";
document.getElementById('inventoryCol2').style.display = "block";
flag=1;
}
}
function warningDisplay(myRadio) {
if(myRadio.value == "yes") {
document.getElementById('warning').innerHTML = "Target Build # should be \"55\" branch and above to select Inventory Data";
}
else {
document.getElementById('warning').innerHTML = "";
}
}
<html>
<body style="background-color:green">
<table>
<tr>
<td><label style="color: white; text-align: left;" id="osTypelable"><b>Product Type</b> </label></td>
<td><select style="width:205px; height:25px" id="osTypeDropdown" onChange="showHide()" >
<option value="win">Windows</option>
<option value="lin">Linux</option>
</select>
</td>
</tr>
<td style="color: white;text-align: left; " id="inventoryCol1"><label ><b>With Inventory Data</b> </label></td>
<td style="color: white;font-size:13px;font-weight: bold;" width=200 id="inventoryCol2">
<label style="display:inline-block;"><input type="radio" value="no" onClick="warningDisplay(this)" name="inv"/> No </label>
<label style="display:inline-block;"><input type="radio" value="yes" onClick="warningDisplay(this)" name="inv"/> Yes</label>
</td>
</tr>
<tr>
<td colspan="2"><b style="color: #DC143C;font-size:13; float:right" id="warning"> </b> </td>
</tr>
<tr>
<td colspan='2' align="center"><input name="submit"
type="submit" class="login" value="Submit"></td>
</tr>
</table>
</body>
</html>

<td> have initialy display: table-cell
var flag = 1;
function showHide() {
if (flag == 1) {
document.getElementById('warning').style.display = "none";
document.getElementById('inventoryCol1').style.display = "none";
document.getElementById('inventoryCol2').style.display = "none";
flag=0;
}
else {
document.getElementById('warning').style.display = "block";
document.getElementById('inventoryCol1').style.display = "table-cell";
document.getElementById('inventoryCol2').style.display = "table-cell";
flag=1;
}
}
function warningDisplay(myRadio) {
if(myRadio.value == "yes") {
document.getElementById('warning').innerHTML = "Target Build # should be \"55\" branch and above to select Inventory Data";
}
else {
document.getElementById('warning').innerHTML = "";
}
}
<html>
<body style="background-color:green">
<table>
<tr>
<td><label style="color: white; text-align: left;" id="osTypelable"><b>Product Type</b> </label></td>
<td><select style="width:205px; height:25px" id="osTypeDropdown" onChange="showHide()" >
<option value="win">Windows</option>
<option value="lin">Linux</option>
</select>
</td>
</tr>
<tr>
<td style="color: white;text-align: left; " id="inventoryCol1"><label ><b>With Inventory Data</b> </label></td>
<td style="color: white;font-size:13px;font-weight: bold;" width=200 id="inventoryCol2">
<label style="display:inline-block;"><input type="radio" value="no" onClick="warningDisplay(this)" name="inv"/> No </label>
<label style="display:inline-block;"><input type="radio" value="yes" onClick="warningDisplay(this)" name="inv"/> Yes</label>
</td>
</tr>
<tr>
<td colspan="2"><b style="color: #DC143C;font-size:13; float:right" id="warning"> </b> </td>
</tr>
<tr>
<td colspan='2' align="center"><input name="submit"
type="submit" class="login" value="Submit"></td>
</tr>
</table>
</body>
</html>

Use visibility property instead of display.
var flag = 1;
function showHide() {
if (flag == 1) {
document.getElementById('warning').style.visibility = "hidden";
document.getElementById('inventoryCol1').style.visibility = "hidden";
document.getElementById('inventoryCol2').style.visibility = "hidden";
flag = 0;
} else {
document.getElementById('warning').style.visibility = "visible";
document.getElementById('inventoryCol1').style.visibility = "visible";
document.getElementById('inventoryCol2').style.visibility = "visible";
flag = 1;
}
}
function warningDisplay(myRadio) {
if (myRadio.value == "yes") {
document.getElementById('warning').innerHTML = "Target Build # should be \"55\" branch and above to select Inventory Data";
} else {
document.getElementById('warning').innerHTML = "";
}
}
#warning,
#inventoryCol1,
#inventoryCol2 {
display: block;
}
<html>
<body style="background-color:green">
<table>
<tr>
<td>
<label style="color: white; text-align: left;" id="osTypelable"><b>Product Type</b> </label>
</td>
<td>
<select style="width:205px; height:25px" id="osTypeDropdown" onChange="showHide()">
<option value="win">Windows</option>
<option value="lin">Linux</option>
</select>
</td>
</tr>
<td style="color: white;text-align: left; " id="inventoryCol1">
<label><b>With Inventory Data</b> </label>
</td>
<td style="color: white;font-size:13px;font-weight: bold;" width=200 id="inventoryCol2">
<label style="display:inline-block;">
<input type="radio" value="no" onClick="warningDisplay(this)" name="inv" /> No </label>
<label style="display:inline-block;">
<input type="radio" value="yes" onClick="warningDisplay(this)" name="inv" /> Yes</label>
</td>
</tr>
<tr>
<td colspan="2"><b style="color: #DC143C;font-size:13; float:right" id="warning"> </b>
</td>
</tr>
<tr>
<td colspan='2' align="center">
<input name="submit" type="submit" class="login" value="Submit">
</td>
</tr>
</table>
</body>
</html>

Button, when clicked, reloads the page instead of calling function

I was making a calculator for a game and made a button like this:
<button onclick="myFunction()">Calculate</button>
When button is clicked, I want to run the following myFunction() script:
<script>
function myFunction() {
var currDura, maxDura, tempMaxDura, tempDura, totDura, optDura;
var iniCost, repCost;
var smithEffi, smithCharge;
var se, sc;
var totCostTillNow, costPerBattle = 0, minCPB;
var i;
var repCount = 1;
//Assigning the values
currDura=document.getElementById("currDura_").value;
maxDura=document.getElementById("maxDura_").value;
iniCost=document.getElementById("iniCost_").value;
repCost=document.getElementById("repCost_").value;
smithEffi=document.getElementById("smithEffi_").value;
smithCharge=document.getElementById("smithCharge_").value;
se = smithEffi / 100;
sc = smithCharge / 100;
tempMaxDura = maxDura;
tempDura = currDura;
totDura = tempDura;
totCostTillNow = iniCost;
costPerBattle = totCostTillNow / totDura;
minCPB = costPerBattle;
for(i=1; i<=60; i++)
{
totCostTillNow += (double) repCost * sc;
tempDura = tempMaxDura * se;
totDura += tempDura;
costPerBattle = (double) (totCostTillNow / totDura);
tempMaxDura -= 1;
if ( minCPB >= costPerBattle )
{
minCPB = costPerBattle;
optDura = tempMaxDura;
}
}
document.getElementById("result").value = eval(minCPB) + " gold at 0/"+ eval(optDura);
//alert("minimum cost per battle = "+ eval(minCPB)+ "at 0/"+ eval(optDura));
}
</script>
Here result is a label where I want to provide the final answer.
When I click the button, it should run the function myFunction() but it doesn't. Instead it refreshes the page and all the data entered is gone.
Can you help me why this is occurring?
<!DOCTYPE html>
<html>
<head>
<title>
Cost Per Battle Calculator
</title>
</head>
<style>
.smaller{
width: 50px;
padding: 12px 10px;
margin: 0px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.bigger{
width: 110px;
padding: 12px 10px;
margin: 0px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
button{
width: 110px;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 0px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
background-color: #badf6f;
padding:20px;
}
</style>
<body>
<div>
<form>
<!-- <label for="fname" id="fn">First Name</label> -->
<!-- <input type="text" id="fname" name="firstname"> -->
<!-- <button onclick="myFunction()">Calculate</button> -->
<table border="0">
<tr>
<td>
<center><img src="http://trial.6te.net/images/gold.gif"></img></center>
</td>
<td>
<center><img src="http://trial.6te.net/images/wood_s.gif"></img></center>
</td>
<td>
<center><img src="http://trial.6te.net/images/ore_s.gif"></img></center>
</td>
<td>
<center><img src="http://trial.6te.net/images/mercury_s.gif"></img></center>
</td>
<td>
<center><img src="http://trial.6te.net/images/sulphur_S.gif"></img></center>
</td>
<td>
<center><img src="http://trial.6te.net/images/crystal_S.gif"></img></center>
</td>
<td>
<center><img src="http://trial.6te.net/images/gems_S.gif"></img></center>
</td>
</tr>
<tr>
<td>
<input type="text" id="gold_" name="Gold" class="bigger">
</td>
<td>
<input type="text" id="wood_" name="Wood" class="smaller">
</td>
<td>
<input type="text" id="ore_" name="Ore" class="smaller">
</td>
<td>
<input type="text" id="mercury_" name="Mercury" class="smaller">
</td>
<td>
<input type="text" id="sulphur_" name="Sulphur" class="smaller">
</td>
<td>
<input type="text" id="crystals_" name="Crystals" class="smaller">
</td>
<td>
<input type="text" id="gems_" name="Gems" class="smaller">
</td>
</tr>
<tr>
<td>
<input type="text" id="currDura_" name="Current Durability" class="smaller">
</td>
<td>
<input type="text" id="maxDura_" name="Maximum Durability" class="smaller">
</td>
</tr>
<tr>
<td>
<input type="text" id="repCost_" name="Repair Cost" class="bigger">
</td>
</tr>
<tr>
<td>
<input type="text" id="smithEffi_" name="Smith Efficiency" class="smaller">
</td>
<td>
<input type="text" id="smithCharge_" name="Smith Charge" class="smaller">
</td>
</tr>
<tr>
<td colspan="7">
<center><button onclick="myFunction()">Calculate</button></center>
</td>
</tr>
<tr>
<td colspan="7">
<label id="result"></label>
</td>
</tr>
</table>
</form>
</div>
<script>
//Here is the above script
</script>
</body>
</html>

By default the button is submitting the form. To fix it you need to return false;.
onclick="myFunction(); return false;"

Add param e in your function, and the just write e.preventDefault(). More about that.
myFunction(e){
e.preventDefault();
//rest of your code
}

Change your <button> to some other tag like <div> or <span>. It will not look like a button, but functionally it will do what you want. You can style the div with css to look more like button if you want.
<center><span onclick="myFunction()">Calculate</span></center>