Develop Reference

HTML, JS - Display Loop's Output By Calling <div> From HTML To JS

I have a situation where user may insert the Total Quantity and also the Total Pass and Total Fail. I have created a function where when the number of Total Pass inserted, the loop (of entering the pass score) will run according to the iterations inputted.
However, I do not want to have the loop to display the line Enter The Score : in the JavaScript function. Therefore, I want the function to call a div from the HTML itself.
For example, I want the <div id="outputPass"><p>Enter the score : <input type="text" /></p></div> to be called in the loop function which I have created in the document.getElementById('btnPass').onclick = function().
I have inserted some comments in the code section.
document.getElementById('btnPass').onclick = function() {
var totalIterations = parseInt(document.getElementById('inputPass').value);
var output = document.getElementById('outputPass');
var quantity = document.getElementById('quantity').value;
output.innerHTML = '';
if (quantity < totalIterations) {
alert("Invalid Input, Pass Value(" + totalIterations + ") Bigger than Quantity(" + quantity + ")");
} else {
for (var i = 1; i <= totalIterations; i++) {
var item = document.createElement('div');
//Call <div> from HTML
item.innerHTML = "";
output.appendChild(item);
}
}
};
document.getElementById('btnFail').onclick = function() {
var totalIterations = parseInt(document.getElementById('inputFail').value);
var output = document.getElementById('outputFail');
var quantity = document.getElementById('quantity').value;
output.innerHTML = '';
if (quantity < totalIterations) {
alert("Invalid Input, Fail Value(" + totalIterations + ") Bigger than Quantity(" + quantity + ")");
} else {
for (var i = 1; i <= totalIterations; i++) {
var item = document.createElement('div');
//Call <div> from HTML
item.innerHTML = "";
output.appendChild(item);
}
}
};
function togglePass() {
var x = document.getElementById("passDiv");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
function toggleFail() {
var y = document.getElementById("failDiv");
if (y.style.display === "block") {
y.style.display = "none";
} else {
y.style.display = "block";
}
}
.display {
display: none;
}
<form method="post" name="form">
<p>Enter the quantity : <input type="text" id="quantity" name="quantity" /></p><br />
<input type="button" value="Pass" onclick="togglePass()">
<input type="button" value="Fail" onclick="toggleFail()">
<div id="passDiv" class="display">
<p>Enter Total Pass : <input type="text" id="inputPass" name="inputPass" />&nbsp<input type="button" value="Key In Score" id="btnPass" onclick="return validate();"></p><br />
<!--This Div-->
<div id="outputPass">
<p>Enter the score : <input type="text" /></p>
</div>
<br />
<input type="button" value="DONE">
</div>
<br />
<div id="failDiv" class="display">
<p>Enter Total Fail : <input type="text" id="inputFail" />&nbsp<input type="button" value="Key In Score" id="btnFail"></p><br />
<!--This Div-->
<div id="outputFail">
<p>Enter the score : <input type="text" /></p>
</div>
<br />
<input type="button" value="DONE">
</div>
</form>

You can make the following changes to achieve what you are looking for:
Initially we're giving an id of pscore/fscore (for pass and fail respectively) to the <p></p> tags and hiding them.
<p id="fscore" style="display:none">Enter the score : <input type="text" /></p>
We're accessing them in the javascript code in the form of variables pscore and fscore respectively. (Make sure they are declared globally outside)
var pscore = document.getElementById('pscore');
var fscore = document.getElementById('fscore');
Then in the iterations we can just make a clone of the pscore/fscore , give a class of pscore/fscore to the <p></p> tags and remove the id of pscore/score (to avoid duplicate IDs), changing the display to block and append it to the output container by using the following:
var cln = pscore.cloneNode(true);
cln.style.display="block";
cln.className ="pscore";
cln.removeAttribute("id");
item.appendChild(cln);
var cln = fscore.cloneNode(true);
cln.style.display="block";
cln.removeAttribute("id");
cln.className ="fscore";
item.appendChild(cln);
var pscore = document.getElementById('pscore');
var fscore = document.getElementById('fscore');
document.getElementById('btnPass').onclick = function() {
var totalIterations = parseInt(document.getElementById('inputPass').value);
var output = document.getElementById('outputPass');
var quantity = document.getElementById('quantity').value;
output.innerHTML = '';
if (quantity < totalIterations) {
alert("Invalid Input, Pass Value(" + totalIterations + ") Bigger than Quantity(" + quantity + ")");
} else {
for (var i = 1; i <= totalIterations; i++) {
var item = document.createElement('div');
//Call <div> from HTML
var cln = pscore.cloneNode(true);
cln.style.display = "block";
cln.className = "pscore";
cln.removeAttribute("id");
item.appendChild(cln);
output.appendChild(item);
}
}
};
document.getElementById('btnFail').onclick = function() {
var totalIterations = parseInt(document.getElementById('inputFail').value);
var output = document.getElementById('outputFail');
var quantity = document.getElementById('quantity').value;
output.innerHTML = '';
if (quantity < totalIterations) {
alert("Invalid Input, Fail Value(" + totalIterations + ") Bigger than Quantity(" + quantity + ")");
} else {
for (var i = 1; i <= totalIterations; i++) {
var item = document.createElement('div');
//Call <div> from HTML
var cln = fscore.cloneNode(true);
cln.style.display = "block";
cln.className = "fscore";
cln.removeAttribute("id");
item.appendChild(cln);
output.appendChild(item);
}
}
};
function togglePass() {
var x = document.getElementById("passDiv");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
function toggleFail() {
var y = document.getElementById("failDiv");
if (y.style.display === "block") {
y.style.display = "none";
} else {
y.style.display = "block";
}
}
.display {
display: none;
}
<form method="post" name="form">
<p>Enter the quantity : <input type="text" id="quantity" name="quantity" /></p><br />
<input type="button" value="Pass" onclick="togglePass()">
<input type="button" value="Fail" onclick="toggleFail()">
<div id="passDiv" class="display">
<p>Enter Total Pass : <input type="text" id="inputPass" name="inputPass" /> <input type="button" value="Key In Score" id="btnPass"></p><br />
<!--This Div-->
<div id="outputPass">
<p id="pscore" style="display:none">Enter the score : <input type="text" /></p>
</div>
<br />
<input type="button" value="DONE">
</div>
<br />
<div id="failDiv" class="display">
<p>Enter Total Fail : <input type="text" id="inputFail" /> <input type="button" value="Key In Score" id="btnFail"></p><br />
<!--This Div-->
<div id="outputFail">
<p id="fscore" style="display:none">Enter the score : <input type="text" /></p>
</div>
<br />
<input type="button" value="DONE">
</div>
</form>

Js display division is not working

Need to display given div (valueV, valueJ & valueO) based on user text input id=pcode. Scripted js, form and divisions as follows, but isn't working. Tried different method and refered stacks, cant fix, pls help
<script type="text/javascript">
var pcode;
function onload() {
pcode = document.getElementById('pcode');
}
function kk() {
if (pcode == 'v') {
document.getElementById("valueV").style.display = "inline";
} else if (pcode == 'j') {
document.getElementById("valueJ").style.display = "inline";
}
} else {
document.getElementById("valueO").style.display = "inline";
}
}
</script>
<body onload="onload();">
<input type="text" name="two" value="" id="pcode" maxlength="1" size="1"> <input type="button" value="Submit" onclick="kk();"/>
</body>
<div id="valueV" style="display: none;">
Value V
</div>
<div id="valueJ" style="display: none;">
Value J
</div>
<div id="valueO" style="display: none;">
Value O
</div>

pcode is the DOM element and you are comparing it to a string. A simple console.log(pcode) will show you that. You need to look at the value.
if (pcode.value === "j")

You should read up on addEventListener. Using HTML attributes to attach event listeners is going to lead you to a path of several global variables (as well as some ugly markup).
document.addEventListener('DOMContentLoaded', function () {
var pcode = document.getElementById('pcode');
document.querySelector('.submit').addEventListener('click', function () {
if (pcode.value == 'v') {
document.getElementById("valueV").style.display = "inline";
} else if (pcode.value == 'j') {
document.getElementById("valueJ").style.display = "inline";
} else {
document.getElementById("valueO").style.display = "inline";
}
});
});
<body>
<input type="text" name="two" value="" id="pcode" maxlength="1" size="1">
<input type="button" value="Submit" class="submit" />
<div id="valueV" style="display: none;">
Value V
</div>
<div id="valueJ" style="display: none;">
Value J
</div>
<div id="valueO" style="display: none;">
Value O
</div>
</body>

I tried to keep your code as similar as possible for you without making any major changes but ensuring it still worked.
I changed a couple of things for you, I removed an extra bracket you had in your else statement.
I also removed the ; you had in reference to functions within your html. I hope this code is what you need:
<body onload="onload()">
<input type="text" name="two" value="" id="pcode" maxlength="1" size="1"> <input type="button" value="Submit" onclick="kk()"/>
</body>
<div id="valueV" style="display: none;">
Value V
</div>
<div id="valueJ" style="display: none;">
Value J
</div>
<div id="valueO" style="display: none;">
Value O
</div>
<script>
var pcode;
function kk() {
pcode = $('#pcode').val();
if (pcode == 'v') {
document.getElementById("valueV").style.display = "inline";
} else if (pcode == 'j') {
document.getElementById("valueJ").style.display = "inline";
} else {
document.getElementById("valueO").style.display = "inline";
}
}
</script>
Any questions just ask!

Displaying a name using Javascript

Am new to javascript and doing my student project. I have created a sample page where user enters the name of a place..
He can enter a maximum of 4 places.. I Just like to have a text of "Place A" on the top when user is entering 1st place and when he clicks on "Add Another Place" then "Place B" needs to be displayed to enter text and same like "Place C" and "Place D".
Here is my code
var i = 0;
function isNumericKey(e) {
if (window.event) {
var charCode = window.event.keyCode;
} else if (e) {
var charCode = e.which;
} else {
return true;
}
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
function add() {
var a = document.getElementById("ad").value;
// alert('Please Enter Details');
if (a != 'null' || a != '') {
i++;
if (i == 1) {
//document.getElementById("input").reset();
document.getElementById("Place1").style.display = "none";
document.getElementById("Place2").style.display = "block";
document.getElementById("Place2").required = true;
document.getElementById("Place3").style.display = "none";
document.getElementById("Place4").style.display = "none";
} else if (i == 2) {
//document.getElementById("input").reset();
document.getElementById("Place1").style.display = "none";
document.getElementById("Place2").style.display = "none";
document.getElementById("Place3").style.display = "block";
document.getElementById("Place3").required = true;
document.getElementById("Place4").style.display = "none";
} else if (i == 3) {
//document.getElementById("input").reset();
document.getElementById("Place1").style.display = "none";
document.getElementById("Place2").style.display = "none";
document.getElementById("Place3").style.display = "none";
document.getElementById("Place4").style.display = "block";
document.getElementById("Place4").required = true;
document.getElementById("ad").style.display = "none";
}
}
}
<form action="abc.php" method="post">
<table width="600" ;>
<tr>
<td><font size=4px><label>Place</label></font>
<br>
<br>
</td>
<td>
<input type="text" name="Place1" id="Place1" value="" style="display:block; width: 20vw;height:30px;font-size:14pt;" onkeypress="return isNumericKey(event);" required="true" />
<br>
</td>
<td>
<input type="text" name="Place2" id="Place2" value="" style="display:none; width: 20vw;height:30px;font-size:14pt;" onkeypress="return isNumericKey(event);" />
<br>
</td>
<td>
<input type="text" name="Place3" id="Place3" value="" style="display:none; width: 20vw;height:30px;font-size:14pt;" onkeypress="return isNumericKey(event);" />
<br>
</td>
<td>
<input type="text" name="Place4" id="Place4" value="" style="display:none; width: 20vw;height:30px;font-size:14pt;" onkeypress="return isNumericKey(event);" />
<br>
</td>
</tr>
<td>
<input type="button" name="Add Another place" id="ad" value="Add Another place" onclick="add();" style="display: block;
height: 25px;
width: 175px;
border-radius: 25px;
background-color: #008CBA;
color: #fff;
border: #008CBA;
cursor: pointer;" />
Let me know how to do this..

There are lots of syntax error in your HTML code, anyways beside that the solution to your problem is quite simple. I have written the following script to acquire the functionality required
<script type="text/javascript">
var i = 1;
function add() {
if (i == 1)
{
document.getElementById("Place1").style.display = "none";
document.getElementById("Place2").style.display = "block";
i++;
}
else if(i==2)
{
document.getElementById("Place2").style.display = "none";
document.getElementById("Place3").style.display = "block";
i++;
}
else if (i == 3) {
document.getElementById("Place3").style.display = "none";
document.getElementById("Place4").style.display = "block";
document.getElementById("ad").style.display = "none";
}
}
</script>
And below is my HTML code
<table>
<tr>
<td><label>Place</label></td>
<td><input type="text" name="Place1" id="Place1" value="" style="display:block; width: 20px;height:30px;font-size:14pt;" placeholder="place1"/></td>
<td><input type="text" name="Place2" id="Place2" value="" style="display:none; width: 20px;height:30px;font-size:14pt;" placeholder="place2" /></td>
<td><input type="text" name="Place3" id="Place3" value="" style="display:none; width: 20px;height:30px;font-size:14pt;" placeholder="place3" /></td>
<td><input type="text" name="Place4" id="Place4" value="" style="display:none; width: 20px;height:30px;font-size:14pt;" placeholder="place4" /></td>
</tr>
<tr>
<td><input type="button" name="Add Another place" id="ad" value="Add Another place" onclick="add();" /></td>
</tr>

Something like that ???
var MAX_PLACES = 4;
var currentEditPlace = 0;
function editPlace(index)
{
var places = document.getElementById('places');
var place = places.getElementsByTagName("li")[index];
place.style.display = 'block';
var span = place.getElementsByTagName("span")[0];
var input = document.createElement('input');
input.setAttribute("type", "text");
input.setAttribute("value", "");
span.appendChild(input)
/** Return key => show next place */
input.onkeydown = function(e) {
/** Validation */
if (this.value != "" && e.keyCode == 13) {
addNewPlace();
}
}
/** Auto focus new input */
input.focus();
}
function addNewPlace() {
if (currentEditPlace+1 < MAX_PLACES) {
currentEditPlace++;
editPlace(currentEditPlace);
}
}
/** Start editing place A */
editPlace(currentEditPlace);
<ul id="places">
<li style="display:none;">Place A: <span></span></li>
<li style="display:none;">Place B: <span></span></li>
<li style="display:none;">Place C: <span></span></li>
<li style="display:none;">Place D: <span></span></li>
</ul>
<input type="button" value="Add new place" onclick="addNewPlace()"/>

you need to add jquery library
<ol></ol>
<button id="btn2">Append list item</button>
try this..
$(document).ready(function(){
$("#btn2").click(function(){
var count_cls = $('.munna').length;
if(count_cls<4)
{
$("ol").append("<li class='munna'>Place "+count_cls+"</li>");
}else
{
alert('max reached');
}
});
});
i have given for li you just change it to button whatever you want
chttK :http://jsfiddle.net/6yLpw9jv/2/

Radio button clears text boxes

I have two radio buttons: Click the first radio button and a three textboxes appear if they start entering information and then change their mind and select the second radio button it does not clear the text they have entered. So what I am trying to figure out is if there is a way make it clear the text from those textboxes when a new radio button (of the same group) is chosen. Any help is greatly appreciated!
http://jsfiddle.net/k0paz2pj/
<input
type="radio"
value="Yes"
name="lien"
id="lien"
onchange="showhideForm(this.value);"/><label for="lien">Lien</label>
<input
type="radio"
value="None"
name="lien"
id="nolien"
onchange="showhideForm(this.value);"/><label for="nolien">No Lien</label>
<div id="div1" style="display:none">
<div class="clearfix">
<p>
<label for="lname">Lienholder Name:</label>
<input
type="text"
name="lienlname"
id="lienlname">
</p>
<p>
<label for="laddress">Lienholder Address:</label>
<input
type="text"
name="lienladdress"
id="lienladdress">
</p>
<p>
<label for="ldate">Date of Lien:</label>
<input
type="text"
name="lienldate"
id="datepicker2">
</p>
</div>
</div>
<div id="div2" style="display:none">
<!---You are not qualified to see this form.--->
</div>
<br>
<script type="text/javascript">
function showhideForm(lien) {
if (lien == "Yes") {
document.getElementById("div1").style.display = 'block';
document.getElementById("div2").style.display = 'none';
}
else if (lien == "None") {
document.getElementById("div2").style.display = 'block';
document.getElementById("div1").style.display = 'none';
}
}
</script>

One approach, staying with the plain JavaScript from your question/JS Fiddle demo:
function showhideForm(lien) {
if (lien == "Yes") {
document.getElementById("div1").style.display = 'block';
document.getElementById("div2").style.display = 'none';
} else if (lien == "None") {
document.getElementById("div2").style.display = 'block';
document.getElementById("div1").style.display = 'none';
// getting all the input elements within '#div1' (using a CSS selector):
var inputs = document.querySelectorAll('#div1 input');
// iterating over those elements, using Array.prototype.forEach,
// and setting the value to '' (clearing them):
[].forEach.call(inputs, function (input) {
input.value = '';
});
}
}
JS Fiddle demo.
A marginally more concise form of the above (or, if not more concise, with less repetition):
function showhideForm(lien) {
var isYes = lien.trim().toLowerCase() === 'yes',
div1 = document.getElementById('div1'),
div2 = document.getElementById('div2');
div1.style.display = isYes ? 'block' : 'none';
div2.style.display = isYes ? 'none' : 'block';
if (!isYes) {
[].forEach.call(div1.getElementsByTagName('input'), function (input) {
input.value = '';
});
}
}
JS Fiddle demo.
And, finally, a version that moves away from the obtrusive JavaScript of in-line event-handling (onclick, onchange, etc):
function showhideForm() {
// 'this' in the function is the radio-element to which
// the function is bound as an event-handler:
var isYes = this.value.trim().toLowerCase() === 'yes',
div1 = document.getElementById('div1'),
div2 = document.getElementById('div2');
div1.style.display = isYes ? 'block' : 'none';
div2.style.display = isYes ? 'none' : 'block';
if (!isYes) {
[].forEach.call(div1.getElementsByTagName('input'), function (input) {
input.value = '';
});
}
}
// finding the elements with the name of 'lien':
var lienRadios = document.getElementsByName('lien');
// iterating over those elements, using forEach (again):
[].forEach.call(lienRadios, function (lien) {
// adding a listener for the 'change' event, when it
// occurs the showhideForm function is called:
lien.addEventListener('change', showhideForm);
});
JS Fiddle demo.
References:
Array.prototype.forEach().
document.getElementsByTagName().
document.getElementsByName().
document.querySelectorAll().
EventTarget.addEventListener().
Function.prototype.call().
String.prototype.toLowerCase().
String.prototype.trim().

You can always use this when another radio is checked:
$("#div1 .clearfix input:text").val("");
function showhideForm(lien) {
if (lien == "Yes") {
document.getElementById("div1").style.display = 'block';
document.getElementById("div2").style.display = 'none';
}
else if (lien == "None") {
document.getElementById("div2").style.display = 'block';
document.getElementById("div1").style.display = 'none';
$("#div1 .clearfix input:text").val("");//here use to clear inputs
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" value="Yes" name="lien" id="lien" onchange="showhideForm(this.value);"/><label for="lien">Lien</label>
<input type="radio" value="None" name="lien" id="nolien" onchange="showhideForm(this.value);"/><label for="nolien">No Lien</label>
<div id="div1" style="display:none">
<div class="clearfix">
<p>
<label for="lname">Lienholder Name:</label>
<input type="text" name="lienlname" id="lienlname">
</p>
<p>
<label for="laddress">Lienholder Address:</label>
<input type="text" name="lienladdress" id="lienladdress">
</p>
<p>
<label for="ldate">Date of Lien:</label>
<input type="text" name="lienldate" id="datepicker2">
</p>
</div>
</div>
<div id="div2" style="display:none">
<!---You are not qualified to see this form.--->
</div>
After (hate) comments (kidding) a js approach:
function showhideForm(lien) {
if (lien == "Yes") {
document.getElementById("div1").style.display = 'block';
document.getElementById("div2").style.display = 'none';
} else if (lien == "None") {
document.getElementById("div2").style.display = 'block';
document.getElementById("div1").style.display = 'none';
//js
container = document.getElementById('div1');
inputs = container.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
inputs[index].value = "";
}
}
}
<input type="radio" value="Yes" name="lien" id="lien" onchange="showhideForm(this.value);" />
<label for="lien">Lien</label>
<input type="radio" value="None" name="lien" id="nolien" onchange="showhideForm(this.value);" />
<label for="nolien">No Lien</label>
<div id="div1" style="display:none">
<div class="clearfix">
<p>
<label for="lname">Lienholder Name:</label>
<input type="text" name="lienlname" id="lienlname">
</p>
<p>
<label for="laddress">Lienholder Address:</label>
<input type="text" name="lienladdress" id="lienladdress">
</p>
<p>
<label for="ldate">Date of Lien:</label>
<input type="text" name="lienldate" id="datepicker2">
</p>
</div>
</div>
<div id="div2" style="display:none">
<!---You are not qualified to see this form.--->
</div>

Show Hide div is successfull but page refresh on click. razor

I am able to show/hide div onclick successfully.
But onclick div display for a second and page get refresh.
I have use javascript.
Code:
#{var Count = 0;}
foreach (var commentlist in Model.Comments.Where(x => x.CommentParentID == 0))
{
<div id="#Count" style="display: none;">
<input type="submit" id="reply" class="reply-link" onclick="return showHide(#Count);" value="Reply" />
#{Count++; }
</div>
}
<script type="text/javascript">
function showHide(Count) {
var ele = document.getElementById(Count);
if (ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
}
</script>

If the submit button is inside a <form> you need to return false from the showHide if you don't want the page to get submitted after clicking on it:
<script type="text/javascript">
function showHide(Count) {
var ele = document.getElementById(Count);
if (ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
return false; // <-- that's important to prevent the page from submitting
}
</script>
Also please bear in mind that an id attribute cannot start with a number in HTML. So please fix your markup:
#{var Count = 0;}
foreach (var commentlist in Model.Comments.Where(x => x.CommentParentID == 0))
{
<div id="mydiv_#Count" style="display: none;">
<input type="submit" id="reply" class="reply-link" onclick="return showHide('mydiv_#Count');" value="Reply" />
#{Count++; }
</div>
}
<script type="text/javascript">
function showHide(id) {
var ele = document.getElementById(id);
if (ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
return false;
}
</script>

It happens because your page is being submitted. Try using <input type="button"...> instead of <input type="submit"...>
Difference here: Difference between <input type='button' /> and <input type='submit' />
And your controls id can't start with a number and must be unique:
#{var Count = 0;}
foreach (var commentlist in Model.Comments.Where(x => x.CommentParentID == 0))
{
<div id="div_#Count" style="display: none;">
<input type="submit" id="reply_#Count" class="reply-link" onclick="return showHide('mydiv_#Count');" value="Reply" />
#{Count++; }
</div>
}