Changing paragraph text with data from multiple inputs - javascript

I want to type in measurements of my items into text fields, and then by clicking on a button have it transfer those measurements into a paragraph to its corresponding fields. My current code looks like this
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<td id="inputmeasurements">
<p align=right>
Bust:<input type="text" name="bust"><br>
Waist:<input type="text" name="waist"><br>
Hips:<input type="text" name="hips"><br>
Lenght:<input type="text" name="lenght"><br>
Shoulders:<input type="text" name="shoulders"><br>
Sleeves:<input type="text" name="sleeves"><br>
Inseam:<input type="text" name="inseam"><br>
</p>
</td>
<td id="finishedmeasurements">
<p id="m1" align=left><FONT size=3 face=Trebuchet MS>
B1 Bust inches flat </br>
W1 Waist inches flat </br>
H1 Hips inches flat </br>
L1 Length </br>
S1 Shoulders </br>
S2 Sleeves </br>
I1 Inseam </br>
</FONT></p>
</td>
</tr>
</table>
<p>This is a test for measurements entering and copying to metadata</p>
<button onclick="myFunction2()">Enter</button>
<script>
function myFunction2() {
var str = document.getElementById("m1").innerHTML;
var res = str.replace(/B1/g, "bust").replace(/W1/g, "waist").replace(/H1/g, "hips").replace(/L1/g, "lenght").replace(/S1/g, "shoulders").replace(/S2/g, "sleeves").replace(/I1/g, "inseam");
document.getElementById("m1").innerHTML = res;
}
</script>
<button onclick="myFunction3()">New</button>
<script>
function myFunction3() {
window.location.reload();
}
</script>
</body>
<style>
#finishedmeasurements {
font-family: Trebuchet MS;
line-height: 24px;
}
#inputmeasurements {
font-family: Trebuchet MS;
padding-right: 20px;
line-height: 23px;
}
input {
width: 30px !important;
margin-left: 5px;
}
</style>
</html>

Try this:
<table>
<tr>
<td id="inputmeasurements">
<p align=right>
Bust:<input type="text" name="bust" class="bust"><br>
Waist:<input type="text" name="waist" class="waist"><br>
Hips:<input type="text" name="hips" class="hips" ><br>
Lenght:<input type="text" name="lenght" class="lenght" ><br>
Shoulders:<input type="text" name="shoulders" class="shoulders" ><br>
Sleeves:<input type="text" name="sleeves" class="sleeves" ><br>
Inseam:<input type="text" name="inseam" class="inseam" ><br>
</p>
</td>
<td id="finishedmeasurements">
<p id="m1" align=left><FONT size=3 face=Trebuchet MS>
B1 Bust inches flat </br>
W1 Waist inches flat </br>
H1 Hips inches flat </br>
L1 Length </br>
S1 Shoulders </br>
S2 Sleeves </br>
I1 Inseam </br>
</FONT></p>
</td>
</tr>
</table>
<p>This is a test for measurements entering and copying to metadata</p>
<button class='enter'>Enter</button>
<button class="new">New</button>
<script>
$(function() {
$('.new').on('click', function() {
location.reload();
});
$('.enter').on('click', function() {
var str = document.getElementById("m1").innerHTML;
var bust = $('.bust').val();
var waist = $('.waist').val();
var hips = $('.hips').val();
var lenght = $('.lenght').val();
var shoulders = $('.shoulders').val();
var sleeves = $('.sleeves').val();
var inseam = $('.inseam').val();
var res = str.replace(/B1/g, bust).replace(/W1/g, waist).replace(/H1/g, hips).replace(/L1/g, lenght).replace(/S1/g, shoulders).replace(/S2/g, sleeves).replace(/I1/g, inseam);
document.getElementById("m1").innerHTML = res;
});
});
</script>
<style>
#finishedmeasurements {
font-family: Trebuchet MS;
line-height: 24px;
}
#inputmeasurements {
font-family: Trebuchet MS;
padding-right: 20px;
line-height: 23px;
}
input {
width: 30px !important;
margin-left: 5px;
}
</style>
Hope this will help you.

Please describe your problem.
Please tall me what type of output you need.
I give you modified html file
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<td id="inputmeasurements">
<p align=right>
Bust:<input type="text" name="bust" id="bust"><br>
Waist:<input type="text" name="waist" id="waist"><br>
Hips:<input type="text" name="hips" id="hips"><br>
Lenght:<input type="text" name="lenght" id="lenght"><br>
Shoulders:<input type="text" name="shoulders" id="shoulders"><br>
Sleeves:<input type="text" name="sleeves" id="sleeves"><br>
Inseam:<input type="text" name="inseam" id="inseam"><br>
</p>
</td>
<td id="finishedmeasurements">
<p id="m1" align=left><FONT size=3 face=Trebuchet MS>
B1 Bust inches flat </br>
W1 Waist inches flat </br>
H1 Hips inches flat </br>
L1 Length </br>
S1 Shoulders </br>
S2 Sleeves </br>
I1 Inseam </br>
</FONT></p>
</td>
</tr>
</table>
<p>This is a test for measurements entering and copying to metadata</p>
<button onclick="myFunction2()">Enter</button>
<script>
function myFunction2() {
var str = document.getElementById("m1").innerHTML;
var res = str.replace(/B1/g, document.getElementById("bust").value).replace(/W1/g, document.getElementById("waist").value).replace(/H1/g, document.getElementById("hips").value).replace(/L1/g, document.getElementById("lenght").value).replace(/S1/g, document.getElementById("shoulders").value).replace(/S2/g, document.getElementById("sleeves").value).replace(/I1/g, document.getElementById("inseam").value);
document.getElementById("m1").innerHTML = res;
}
</script>
<button onclick="myFunction3()">New</button>
<script>
function myFunction3() {
window.location.reload();
}
</script>
</body>
<style>
#finishedmeasurements {
font-family: Trebuchet MS;
line-height: 24px;
}
#inputmeasurements {
font-family: Trebuchet MS;
padding-right: 20px;
line-height: 23px;
}
input {
width: 30px !important;
margin-left: 5px;
}
</style>
</html>

Related

Sort table row using javascript's array method- sort( ) & reverse( )

I want to put the table row in an array than use the loop to iterate the array for comparing two rows but i don't know how this sort method of array works is it going to compare from S.No column than initials column and so on.
how to use the array method to sort()- ascending order and descending order by reverse().
I don't want to use code from google want to make my own logic just help me where i am lacking.
<!DOCTYPE html>
<html>
<head>
<style>
.tab,
.tab th,
.tab tr,
.tab td {
border: 1px solid black;
border-collapse: collapse;
padding: 10px;
}
.circle {
background-color: yellow;
border-radius: 50%;
margin: 2px 22px 2px;
line-height: 10px;
padding: 12px;
text-align: center;
vertical-align: middle;
display: inline-block;
}
</style>
</head>
<body>
<h2><u>CONTACT MANAGEMENT </u></h2></br></br>
<form>
<label>First Name</label>
<input type="text" id="fname" style="text-transform: capitalize;" />
<label>Last Name</label>
<input type="text" id="lname" style="text-transform: capitalize;" /></br></br>
<label>Number</label>
<input type="text" id="phone" pattern="[1-9]{1}[0-9]{9}" maxlength="10" /></br></br>
<input type="hidden" id="hdn" value="1">
<button type="button" onclick="dataSave()">save</button></br></br>
</form>
</br></br>
<div class="div1">
<table class="tab" id="table">
<th>S.No</th>
<th>Initals</th>
<th>FullName</th>
<th>PhoneNo.</th>
<tbody id="table_row">
</tbody>
</table>
</div>
<button type="button" id="asort_btn" class="sort" onclick="asec_sort()">Asec</button>
<button type="button" id="dsort_btn" class="sort" onclick="desc_sort()">Desc</button>
<script>
function dataSave()
{
var first = document.getElementById('fname').value;
var last = document.getElementById('lname').value;
var phone = document.getElementById('phone').value;
var firstNameArr = new Array();
var lastNameArr = new Array();
var phoneNoArr = new Array();
firstNameArr.push(first);
lastNameArr.push(last);
phoneNoArr.push(phone);
var num = parseInt(document.getElementById("hdn").value);
for(i=0;i<firstNameArr.length;i++)
{
var preFirstName = firstNameArr[i].slice(0,1);
var preLastName = lastNameArr[i].slice(0,1);
document.getElementById('table_row').innerHTML += `<tr><td>${num}</td>
<td class="circle">${preFirstName}${preLastName}</td>
<td>${firstNameArr[i]} ${lastNameArr[i]}</td>
<td>${phoneNoArr[i]}</td></tr>`;
}
num = num+1;
document.getElementById('hdn').value=num;
document.getElementById('fname').value="";
document.getElementById('lname').value="";
document.getElementById('phone').value="";
}
function asec_sort()
{
alert('hi');
var tableRowArr = new Array();
tableRowArr = document.getElementById('table_row').innerHTML;
console.log(tableRowArr);
console.log(tableRowArr.sort());
}
</script>
</body>
</html>

How can I create a conditional statement to dynamically create a unique button for each ID?

This is a form where people have to input their names and the button I'm creating is for team members to select their available times.
let button = document.createElement("Button");
let buttonTxt = document.createTextNode("Select Times");
button.appendChild(buttonTxt);
function createButton(){
let name1 = document.getElementById("name1");
let name2 = document.getElementById("name2");
let name3 = document.getElementById("name3");
let name4 = document.getElementById("name4");
let name5 = document.getElementById("name5");
if (name1 && name1.value) { // if there is a name in the input, a button will be created for their section
document.getElementById('b1').appendChild(button);
}
if (name2 && name2.value) {
document.getElementById('b2').appendChild(button);
}
if (name3 && name3.value) {
document.getElementById('b3').appendChild(button);
}
if (name4 && name4.value) {
document.getElementById('b4').appendChild(button);
}
if (name5 && name5.value) {
document.getElementById('b5').appendChild(button);
} }
If statements work individually but when put in a function it doesn't work anymore. Below is the HTML where top is the code from the form while the bottom HTML is from where the button should be created. The buttons will need to be ab;e to add event properties on them (ex. onclick)
<h4>Team Host:</h4>
<p><input type="text" name="name1" value="Enter Name" id="name1">
</p>
<br>
<h4>Other Members:</h4>
<p><input type="text" name="name2" id="name2"></p>
<br>
<p><input class='new' type='text' name='name3' id='name3'></p>
<br>
<p><input class='new' type='text' name='name4' id='name4'></p>
<br>
<p><input class='new' type='text' name='name5' id='name5'></p>
<p id="p1"></p>
<p>Times go here</p>
<p id="b1" name="b1"></p>
<p id="p2"></p>
<p>Times go here</p>
<p id="b2" name="b2"></p>
<p id="p3"></p>
<p>Times go here</p>
<p id="b3" name="b3"></p>
<p id="p4"></p>
<p>Times go here</p>
<p id="b4" name="b4"></p>
<p id="p5"></p>
<p>Times go here</p>
<p id="b5" name="b5"></p>
maybe this?
const button = document.createElement('button')
, buttonTxt = document.createTextNode('Select Times')
;
button.setAttribute('onclick', 'foo(this)') // add click function to button
button.appendChild(buttonTxt);
document.querySelectorAll('#name1,#name2,#name3,#name4,#name5')
.forEach(nm=>
{
if(nm.value)
{
let newBt = button.cloneNode(true)
, ref = nm.id.replace(/^\D+/g,'')
;
newBt.dataset.info = ref
document.getElementById(`b${ref}`) // get correspondig B1-5
.appendChild(newBt) // add new button
}
})
// buttons calls
function foo(bt)
{
console.clear()
console.log('clicked is : ', bt.dataset.info )
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
p {
display : block;
height : 2.4em;
background-color : lightgrey;
padding : .2em;
margin : .1em;
}
h4 {
margin : .5em;
}
<h4>Team Host:</h4>
<p><input type="text" name="name1" id="name1" value="Enter Name"></p>
<br>
<h4>Other Members:</h4>
<p><input type="text" name="name2" id="name2"></p>
<p><input type='text' name='name3' id='name3'></p>
<p><input type='text' name='name4' id='name4' value="abc"></p>
<p><input type='text' name='name5' id='name5'></p>
<hr>
<p id="b1"></p>
<p id="b2"></p>
<p id="b3"></p>
<p id="b4"></p>
<p id="b5"></p>

Multiple arrays, checkboxes

What I want to try to do is kind of tricky so I will list the steps and my code below.
When the page opens the user is presented two options via checkboxes. On load neither are defaulted as checked. If the user checks the top one and decides they dont want that one the other should be cleared.
Whatever ends up being selected and they press Submit, I would like that array to populate the screen. Right now its just dummy names but will change. If after loading the array and they want to change to the other check box, the array on the screen needs to be cleared and the other one loaded with breaks between them. That holds true for either one they choose.
Ive posted my code so far below. The html renders correctly. What I dont know how to do is load the arrays. Just learning JS but this was presented to me to get done.
<script>
var cash = ["Susan", "Billy", "Jennifer"];
document.write(cash[0]);
var cust = ["David", "Larry", "Melissa"];
document.write(cust[0]);
</script>
<DOCTYPE = html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 100%;
}
label {
color: blue;
font-family: verdana;
font-size: 100%;
}
.wrapper {
text-align: center;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
}
</style>
</head>
<body>
<center>
<p><img src="C:\Users\hac532\Desktop\Logos\CO-BT.JPG" alt="CO Logo" style="width:231px;height:212px;margin-left:15px;">
<h1>Select the department you want comments for from the list below by checking the box next to it</h1>
<br>
<br>
<form action="/action_page.php">
<input type="checkbox" id="Cash Applications" name="Cash Applications" value="Cash Apps">
<label for="Cash Applications"> Cash Applications</label><br>
<br>
<input type="checkbox" id="Customer Service" name="Customer Service" value="Customer Service">
<label for="vehicle2"> Customer Service</label><br>
<br>
<br>
<br>
<input type="submit" value="Select">
<button type="Clear Selection" id="button1" >Clear</button>
</center>
</body>
</html>
Checkboxes usually let the user select more than one. Your restriction of only allowing one to be selected is kind of nonstandard so I've changed them to radio buttons.
You've also got an action on your form, which will cause it to load another page. I added an onclick handler which stops it from submitting.
var cash = ["Susan", "Billy", "Jennifer"];
//document.write(cash[0]);
var cust = ["David", "Larry", "Melissa"];
//document.write(cust[0]);
function do_submit() {
// Decide which list to use:
var list = null;
if ( document.getElementById('Cash Applications').checked ) {
list = cash;
}
if ( document.getElementById('Customer Service').checked ) {
list = cust;
}
if ( list == null ) {
alert( 'Please select a list.' );
} else {
Put the list items on the page in the 'list' div:
let listElement = document.getElementById( 'list' );
listElement.innerHTML = '';
list.forEach( function( name ) {
listElement.innerHTML += name + '<br>';
});
}
return false;
}
<DOCTYPE = html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 100%;
}
label {
color: blue;
font-family: verdana;
font-size: 100%;
}
.wrapper {
text-align: center;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
}
</style>
</head>
<body>
<center>
<p><img src="C:\Users\hac532\Desktop\Logos\CO-BT.JPG" alt="CO Logo" style="width:231px;height:212px;margin-left:15px;">
<h1>Select the department you want comments for from the list below by checking the box next to it</h1>
<br>
<br>
<form action="/action_page.php" onsubmit="return do_submit();">
<input type="radio" id="Cash Applications" name="name" value="Cash Apps">
<label for="CashApplications"> Cash Applications</label><br>
<br>
<input type="radio" id="Customer Service" name="name" value="Customer Service">
<label for="Customer Service"> Customer Service</label><br>
<br>
<br>
<br>
<input type="submit" value="Select">
<button type="Clear Selection" id="button1" >Clear</button>
</center>
<div id="list">names will appear here</div>
</body>
</html>
So, your current scripts just directly append with document.writes. You need to define some elements to hold the info you want to display/update. I defined a div named "displaySelected". It starts out empty.
To handle the toggle of checkboxes you need some onclick functions for each checkbox... I defined a single one named selectBox and passed in a string to tell the function which checkbox was checked. In that function if cash was clicked then I clear cust and if cust was checked then I clear cash.
To handle displaying the selection you need an onclick function for the submit button. I created one named selectArray(). It clears out the contents of the displaySelected div and then creates an unordered list element then loops through whichever array was selected and creates list item elements and populates their text with the item from the array. Use the appendChild() function to add the li to the ul and the ul to the div
To handle clearing the selection you need an onclick function for the clear button. I created one named clearSelection(). It unchecks both boxes and then clears out the contents of the displaySelected div by setting its innerHTML to ''
var cash = ["Susan", "Billy", "Jennifer"];
var cust = ["David", "Larry", "Melissa"];
var cashBox = document.getElementById("Cash Applications");
var custBox = document.getElementById("Customer Service");
var displayDiv = document.getElementById("displaySelected");
function selectBox(box) {
switch (box) {
case 'cash':
custBox.checked = false;
break;
case 'cust':
cashBox.checked = false;
break;
default:
break;
}
}
function selectArray() {
displayDiv.innerHTML = '';
var uList = document.createElement("ul");
if (cashBox.checked) {
for (var cashIndex = 0; cashIndex < cash.length; cashIndex++) {
var cashEle = document.createElement("li");
cashEle.innerText = cash[cashIndex];
uList.appendChild(cashEle);
}
} else if (custBox.checked) {
for (var custIndex = 0; custIndex < cust.length; custIndex++) {
var custEle = document.createElement("li");
custEle.innerText = cust[custIndex];
uList.appendChild(custEle);
}
}
displayDiv.appendChild(uList);
}
function clearSelection() {
cashBox.checked = false;
custBox.checked = false;
displayDiv.innerHTML = '';
}
h1 {
color: blue;
font-family: verdana;
font-size: 100%;
}
label {
color: blue;
font-family: verdana;
font-size: 100%;
}
.wrapper {
text-align: center;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
}
<!DOCTYPE html>
<html>
<head></head>
<body>
<center>
<img src="C:\Users\hac532\Desktop\Logos\CO-BT.JPG" alt="CO Logo" style="width:231px;height:212px;margin-left:15px;">
<h1>Select the department you want comments for from the list below by checking the box next to it</h1>
<br>
<br>
<form action="/action_page.php">
<input type="checkbox" id="Cash Applications" name="Cash Applications" value="Cash Apps" onclick="selectBox('cash')">
<label for="Cash Applications"> Cash Applications</label><br>
<br>
<input type="checkbox" id="Customer Service" name="Customer Service" value="Customer Service" onclick="selectBox('cust')">
<label for="vehicle2"> Customer Service</label><br>
<br>
<br>
<br>
<input type="submit" value="Select" onclick="selectArray()">
<button type="Clear Selection" id="button1" onclick="clearSelection()">Clear</button>
</form>
<br><br>
<div id="displaySelected">
</div>
</center>
</body>
</html>
This is not as elaborate as the previous answer, but it still works.
<DOCTYPE = html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 100%;
}
label {
color: blue;
font-family: verdana;
font-size: 100%;
}
.wrapper {
text-align: center;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
}
</style>
</head>
<script>
var cash = ["Susan", "Billy", "Jennifer"];
document.write(cash[0]);
var cust = ["David", "Larry", "Melissa"];
document.write(cust[0]);
function doChkClick(e) {
//get references to elements
spn = document.getElementById('spnout');
chkcash = document.getElementById('chkCash');
chkcust = document.getElementById('chkCust');
// reverse other checkbox
if (e === chkcash && e.checked) chkcust.checked = false
if (e === chkcust && e.checked) chkcash.checked = false
// show array
if (chkcash.checked) spn.innerHTML = cash.join(' ')
if (chkcust.checked) spn.innerHTML = cust.join(' ')
// if nothing checked
if (!chkcash.checked && !chkcust.checked)
spn.innerHTML = '[Empty]'
}
</script>
<body>
<center>
<p><img src="C:\Users\hac532\Desktop\Logos\CO-BT.JPG" alt="CO Logo" style="width:231px;height:212px;margin-left:15px;">
<h1>Select the department you want comments for from the list below by checking the box next to it</h1>
<br>
<br>
<form action="/action_page.php">
<input type="checkbox" name="Cash Applications" value="Cash Apps" id="chkCash" onclick=doChkClick(this)>
<label for="Cash Applications"> Cash Applications</label><br>
<br>
<input type="checkbox" name="Customer Service" value="Customer Service" id="chkCust" onclick=doChkClick(this)>
<label for="vehicle2"> Customer Service</label><br>
<br>
<br>
<b><span id="spnout">[Empty]</span></b>
<br>
<br>
<input type="submit" value="Select">
<button type="Clear Selection" id="button1" >Clear</button>
</center>
</body>
</html>
If you prefer to have the script separate from the html, you can use these files:
main.js
var cash = ["Susan", "Billy", "Jennifer"];
document.write(cash[0]);
var cust = ["David", "Larry", "Melissa"];
document.write(cust[0]);
function doChkClick(e) {
//get references to elements
spn = document.getElementById('spnout');
chkcash = document.getElementById('chkCash');
chkcust = document.getElementById('chkCust');
// reverse other checkbox
if (e === chkcash && e.checked) chkcust.checked = false
if (e === chkcust && e.checked) chkcash.checked = false
// show array
if (chkcash.checked) spn.innerHTML = cash.join(' ')
if (chkcust.checked) spn.innerHTML = cust.join(' ')
// if nothing checked
if (!chkcash.checked && !chkcust.checked)
spn.innerHTML = '[Empty]'
}
main.htm
<DOCTYPE = html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 100%;
}
label {
color: blue;
font-family: verdana;
font-size: 100%;
}
.wrapper {
text-align: center;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
}
</style>
<script src="main.js"></script>
</head>
<body>
<center>
<p><img src="C:\Users\hac532\Desktop\Logos\CO-BT.JPG" alt="CO Logo" style="width:231px;height:212px;margin-left:15px;">
<h1>Select the department you want comments for from the list below by checking the box next to it</h1>
<br>
<br>
<form action="/action_page.php">
<input type="checkbox" name="Cash Applications" value="Cash Apps" id="chkCash" onclick=doChkClick(this)>
<label for="Cash Applications"> Cash Applications</label><br>
<br>
<input type="checkbox" name="Customer Service" value="Customer Service" id="chkCust" onclick=doChkClick(this)>
<label for="vehicle2"> Customer Service</label><br>
<br>
<br>
<b><span id="spnout">[Empty]</span></b>
<br>
<br>
<input type="submit" value="Select">
<button type="Clear Selection" id="button1" >Clear</button>
</center>
</body>
</html>

JavaScript - How to place asterisk in the right side of the text box?

I want to place asterisk in the right side of the each text box individually when I am submitting the empty form/field. The code is working but asterisk is displaying in the end of the form.
This is my code:
[<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title></title>
<style type="text/css">
body { font-family:arial, helvetica, sans-serif; font-weight:bold; font-size:13px; color:#000; text-align:left; margin:3px 0px; }
input { text-align:center; border:2px solid #CCC; }
#wrap { width:400px; height:200px; margin:20px; padding:10px; }
#une { margin-top:10px; }
#reg {margin-top:10px; }
.a13B { color:#F00; }
.cntr { text-align:center; }
</style>
</head>
<body>
<div id="wrap">
<form id="regform" name="registerationform" method="POST">
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="300">
<tr>
<td>First Name: </td>
<td class="cntr">
<input type="text" name="fnametxt" size="20"></td>
</tr>
<tr>
<td>Second Name: </td>
<td class="cntr">
<input type="text" name="snametxt" size="20"> </td>
</tr>
<tr>
<td>User Name:</td>
<td class="cntr">
<input type="text" name="unametxt" size="20"> </td>
</tr>
<tr>
<td>Email Address: </td>
<td class="cntr">
<input type="text" name="emailtxt" size="20"> </td>
</tr>
<tr>
<td>Password : </td>
<td class="cntr"><input type="password" name="pwdtxt" size="20"> </td>
</tr>
<tr>
<td>Confirm : </td>
<td class="cntr"><input type="password" name="cpwdtxt" size="20"> </td>
</tr>
</table>
<input id="reg" name="reg" type="button" onclick="regvalidate(this.form)" value="Register Now">
</form>
<div id="une" class="a13B">
</div>
</div>
<!-- end wrap -->
<script type="text/javascript">
var uneObj=document.getElementById("une"); // object ref to msg line
var currentBrdObj;
//
function regvalidate(formObj)
{ uneObj.innerHTML=""; // clear msg line before resubmitting
// gather object ref to input boxes
var allInputs=document.getElementById("regform").getElementsByTagName("input");
// check if value of box is ""
for(var i=0;i<allInputs.length;i++)
{ if(allInputs\[i\].name !="reg") // ignore submit button
{ if(allInputs\[i\].value=="")
{ uneObj.innerHTML=msg\[i\];
if(currentBrdObj){currentBrdObj.style.border="2px solid #CCC"; }
allInputs\[i\].style.border="2px solid #F00";
currentBrdObj=allInputs\[i\];
allInputs\[i\].onclick=function(){ this.style.border="2px solid #CCC"; }
return;
} } }
// check if password and confirm are the same
if((formObj.pwdtxt.value) != (formObj.cpwdtxt.value))
{ uneObj.innerHTML = msg\[msg.length-1\]; // last msg in array
formObj.pwdtxt.value = ""; formObj.pwdtxt.style.border="";
formObj.cpwdtxt.value = ""; formObj.cpwdtxt.style.border="";
return;
}
// all ok so submit form
uneObj.innerHTML = "All ok so submitting form";
formObj.submit();
}
// -----
var msg =\["*","*",
"*","*",
"*","*"\];
msg\[msg.length\]="Passwords must be equal.<br>Please type a password";
//
</script>
</body>
</html>][1]
#PawanKumar
Here is your code:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#submitBtn').on('click', function(e) {
debugger;
e.preventDefault();
var fields = document.getElementsByTagName('input');
for (var i = 0; i < fields.length; i++) {
if (fields[i].hasAttribute('required')) {
if (fields[i].value == "") {
fields[i].classList.add('redBorder');
$(fields[i]).after('*');
} else {
fields[i].classList.remove('redBorder');
}
}
}
});
});
</script>
<style>
.redBorder {
border: 2px solid red;
border-radius: 2px;
}
</style>
</head>
<form novalidate>
<input type="text" placeholder="first name" required/><br/><br/>
<input type="text" placeholder="last name" /><br/><br/>
<button id="submitBtn" value="Submit">Submit</button>
</form>
</html>
Use span element to display asterisk at the end of text box. Try this :
<input type="text" id="name"/> <span style="color:red"> * </span>
Hope this solves your requirement.
Why bother with all that mess?
<input type="text" name="fnametxt" required />*
<input type="email" name="emailtxt" required />*
<input type="submit" value="Register" />
JavaScript required: none at all
With the help of jquery after() method, you can achieve this.
$(fields[i]).after("<span class='redColor'>*</span>");
I have also added code to show red border for required input field.
Note: If you use <form> tag, then HTML5 will automatically does the validation and your script will not execute, so to prevent that use novalidate attribute in the form tag or just remove the form tag.
$(document).ready(function() {
$('#submitBtn').on('click', function(e) {
e.preventDefault();
var fields = document.getElementsByTagName('input');
for (var i = 0; i < fields.length; i++) {
if (fields[i].hasAttribute('required')) {
if (fields[i].value == "") {
fields[i].classList.add('redBorder');
$(fields[i]).after("<span class='redColor'>*</span>");
} else {
fields[i].classList.remove('redBorder');
}
}
}
});
});
.redBorder {
border: 2px solid red;
border-radius: 2px;
}
.redColor{
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form novalidate>
<input type="text" placeholder="first name" required/><br/><br/>
<input type="text" placeholder="last name" /><br/><br/>
<button id="submitBtn" value="Submit">Submit</button>
</form>

Simple calculator in HTML and JavaScript

I have to write a calculator in HTML. I really can't find what is going wrong and it does not show the results. I can't find something wrong can you help? I'm running it in Chrome.
JavaScript File and and the HTML:
showresult(choise){
var n1=parsefloat(document.getElementById('num1').value);
var n2=parsefloat(document.getElementById('num2').value);
var r;
var c=choise;
switch(c)
{
case '1':
r=n1+n2;
break;
case '2':
r=n1-n2;
break;
case '3':
r=n1*n2;
break;
case '4':
r=n1/n2;
break;
case '5':
r=n2*100/n1;
break;
default:
break;
}
document.getElementById('result').innerHTML=r;
}
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<script src="calculator.js" type="text/javascript"></script>
</head>
<body>
<h1>My calculator</h1>
<table border="1" cellpadding="5" cellspacing="5" width="600">
<tr align="center">
<td>First number</td>
<td>Second Number</td>
<td>Result</td>
</tr>
<tr align="center">
<td><input name="number1" type="text" size=10 id='num1'/></td>
<td><input name="number2" type="text" size=10 id='num2'/></td>
<td> <input type="text" id='result' readonly ></td>
</tr>
<tr>
<td colspan="3">
<button onclick="showresult('1')">+</button>
<button onclick="showresult('2')">-</button>
<button onclick="showresult('3')">*</button>
<button onclick="showresult('4')">/</button>
<button onclick="showresult('5')">%</button>
</td>
</tr>
</table>
</body>
</html>
Things to fix:
1) Assign to value, not innerHTML, when referring to an input element. (They have no content, hence no innerHTML.
2) Start a function declaration with the keyword function.
3) It’s parseFloat, not parsefloat. JavaScript is case-sensitive.
Minimally fixed code:
function showresult(choise){
var n1=parseFloat(document.getElementById('num1').value);
var n2=parseFloat(document.getElementById('num2').value);
var r;
var c=choise;
switch(c)
{
case '1':
r=n1+n2;
break;
case '2':
r=n1-n2;
break;
case '3':
r=n1*n2;
break;
case '4':
r=n1/n2;
break;
case '5':
r=n2*100/n1;
break;
default:
break;
}
document.getElementById('result').value=r;
}
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<script src="calculator.js" type="text/javascript"></script>
</head>
<body>
<h1>My calculator</h1>
<table border="1" cellpadding="5" cellspacing="5" width="600">
<tr align="center">
<td>First number</td>
<td>Second Number</td>
<td>Result</td>
</tr>
<tr align="center">
<td><input name="number1" type="text" size=10 id='num1'/></td>
<td><input name="number2" type="text" size=10 id='num2'/></td>
<td> <input type="text" id='result' readonly ></td>
</tr>
<tr>
<td colspan="3">
<button onclick="showresult('1')">+</button>
<button onclick="showresult('2')">-</button>
<button onclick="showresult('3')">*</button>
<button onclick="showresult('4')">/</button>
<button onclick="showresult('5')">%</button>
</td>
</tr>
</table>
</body>
</html>
You are setting the innerHTML property of an input, which doesn't work
because inputs have value property, if you want to show text/data in them.
you should change this line:
document.getElementById('result').innerHTML=r;
to:
document.getElementById('result').value = r;
on creating a calculator in simple javascript, also check this tutorial out that i wrote, it may help you:
Create a calulator in javascript - Tutorial by 10code.dev
var cnum = document.getElementsByClassName('c-num')[0];
var cope = document.getElementsByClassName('c-operator')[0];
var intom = document.getElementById('intop');
var inbottom = document.getElementById('inbottom');
var newinbottom;
var newinbottom2;
var sign;
for(i=0;i<10;i++){
cnum.innerHTML +='<span class="numb" value="'+i+'" id="numid'+i+'" onclick="puton('+i+')">'+i+'</span>';
}
document.getElementById('numid0').style.order = "1";
function puton(numb){
inbottom.value += numb
}
function ans(answer){
//console.log(sign)
if(inbottom.value ==''){
alert('type input');
}else if(sign == "plus"){
newinbottom2 = inbottom.value;
intom.value = inbottom.value;
inbottom.value = parseInt(newinbottom) + parseInt(newinbottom2);
}else if(sign == "minus"){
newinbottom2 = inbottom.value;
intom.value = inbottom.value;
inbottom.value = newinbottom - newinbottom2;
}else if(sign == "divi"){
newinbottom2 = inbottom.value;
intom.value = inbottom.value;
inbottom.value = newinbottom / newinbottom2;
}else if(sign == "mul"){
newinbottom2 = inbottom.value;
intom.value = inbottom.value;
inbottom.value = newinbottom * newinbottom2;
}
sign ='';
}
function opr(opra){
if(sign != '' && sign != undefined){
ans();
}
else if(opra == "clr"){
intom.value =''
inbottom.value ='';
newinbottom='';
newinbottom='';
sign ='';
}
else if(opra == "plus"){
newinbottom = inbottom.value;
intom.value = inbottom.value;
inbottom.value = '';
sign = "plus";
}else if(opra == "minus"){
newinbottom = inbottom.value;
intom.value = inbottom.value;
inbottom.value = '';
sign = "minus";
}else if(opra == "divi"){
newinbottom = inbottom.value;
intom.value = inbottom.value;
inbottom.value = '';
sign = "divi";
}else if(opra == "mul"){
newinbottom = inbottom.value;
intom.value = inbottom.value;
inbottom.value = '';
sign = "mul";
}
}
.main{
width:100vw;
height: 100vh;
display: flex;
justify-content: center;
}
.c-body {
width: 400px;
height: 255px;
background: #ccc;
border: 1px solid;
}
.c-num{
width: 100%;
display: flex;
flex-wrap: wrap;
}
.c-operator{
flex-shrink: 1;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.c-row{
display: flex;
flex-flow: row;
}
.c-operator [id^='numid']{
width: 90px;
flex-direction: initial;
}
[id^='numid'] {
display: flex;
flex-shrink: 1;
background: #fff;
padding: 4px;
margin: 4px;
width: 80px;
justify-content: center;
cursor: pointer;
flex-direction: inherit;
}
.c-minputs .inbox{
display: block;
width: 100%;
}
[id^='numid']:hover{
background: #f5f5f5;
}
<div class="main">
<div class="c-body">
<div class="c-minputs">
<input id="intop" type="number" class="topin inbox" disabled>
<input id="inbottom" type="number" class="bottomin inbox" placeholder="Type Here">
</div>
<div class="c-row">
<div class="c-num">
</div>
<div class="c-operator">
<span class="numb" id="numidplus" onclick="opr('plus')">+</span>
<span class="numb" id="numidminus" onclick="opr('minus')">-</span>
<span class="numb" id="numiddiv" onclick="opr('divi')">/</span>
<span class="numb" id="numidmul" onclick="opr('mul')">*</span>
<span class="numb" id="numidans" onclick="ans('answer')">=</span>
<span class="numb" id="numidclr" onclick="opr('clr')">c</span>
</div>
</div>
</div>
</div>
Make sure you declare the function correctly.
function showresult(choise) {
/* ... */
}
Also, remember that Javascript is case sensitive therefore the right way to parse a float is
parseFloat()
Lastly, as pointed out by gillesc, use the attribute value on the input element.
document.getElementById('result').value=r;
you should replace "innerHTML" to "value" in your code.
If you want to access the text within a non-input HTML element, then you are going to have to use the innerHTML property instead of value
Now code becomes:
document.getElementById('result').value=r;
Here we used the value property that all input elements have to use to grab the value the user enters.
You can use this in your code
function calc(form) {
var D = "0";
var A = document.getElementById("num1").value;
var B = document.getElementById("op").value;
var C = document.getElementById("num2").value;
switch(B){
case'+':
D= parseInt(A)+parseInt(C); break;
case'-':
D= parseInt(A)-parseInt(C); break;
case'*':
D=parseInt(A)*parseInt(C); break;
case'/':
D=parseInt(A)/parseInt(C); break;
}
}
<script>
var num1;
var op;
function pressBtn(value){
var prev = document.forms["calc"]["display"].value;
if (!(prev == "" && value==0)){
var newval = prev+value;
document.forms["calc"]["display"].value = newval;
}
}
function pressOP(operator){
op = operator;
var display = document.forms["calc"]["display"].value;
num1 = parseInt(display);
document.forms["calc"]["display"].value = "";
}
function pressEq(){
var display = document.forms["calc"]["display"].value;
var num2 = parseInt(display);
switch(op){
case "P":
var ans=num1+num2;
break;
case "M":
var ans=num1-num2;
break;
}
document.forms["calc"]["display"].value = ans;
}
</script>
<style>
input[type=button]{
width: 100px;
height: 100px;
font-size: 36px;
margin: 5px;
}
input[type=text]{
width: 300px;
height: 75px;
font-size: 48px;
margin: 5px;
text-align: right;
}
</style>
<body style="background: #ccc;">
<div style="width: 500px; margin: auto; background: #fff; text-align: center">
<form name="calc">
<input type="text" name="display" readonly ><br>
<input type="button" name="btn7" value="7" onClick="pressBtn(7)">
<input type="button" name="btn8" value="8" onClick="pressBtn(8)">
<input type="button" name="btn9" value="9" onClick="pressBtn(9)"><br>
<input type="button" name="btn4" value="4" onClick="pressBtn(4)">
<input type="button" name="btn5" value="5" onClick="pressBtn(5)">
<input type="button" name="btn6" value="6" onClick="pressBtn(6)"><br>
<input type="button" name="btn1" value="1" onClick="pressBtn(1)">
<input type="button" name="btn2" value="2" onClick="pressBtn(2)">
<input type="button" name="btn3" value="3" onClick="pressBtn(3)"><br>
<input type="button" name="btn0" value="0" onClick="pressBtn(0)">
<input type="button" name="btnPlus" value="+" onClick="pressOP('P')" >
<input type="button" name="btnPlus" value="-" onClick="pressOP('M')" ><br>
<input type="button" name="btnEq" value="=" onClick="pressEq();" >
</form>
</div>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>stackoverflow</title>
<style>
body{
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
}
.button {
box-shadow: 0px 10px 14px -7px #276873;
background: linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
background-color: #599bb3;
border-radius: 4px;
border: 1px solid #29668f;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 25px;
font-weight: bold;
padding: 21px 6px;
text-decoration: none;
text-shadow: 0px 1px 0px #3d768a;
height: 50px;
width: 80px;
padding: 0px;
}
.button:hover {
background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
background-color:#408c99;
}
form>input{
height: 40px;
width: 329px;
border-radius: 4px;
border: none;
margin-left: 500px;
font-size: 30px;
}
table{
margin-left: 500px;
}
</style>
</head>
<body>
<div id="main">
<form name="form">
<input name="textview">
</form>
<table>
<tr>
<td><input type="button" class="button" value="Clear" onClick="c()"></td>
</tr>
<tr>
<td><input type="button" class="button" value="7" onClick="insert(7)"></td>
<td><input type="button" class="button" value="8" onClick="insert(8)"></td>
<td><input type="button" class="button" value="9" onClick="insert(9)"></td>
<td><input type="button" class="button" value="/" onClick="insert('/')"></td>
</tr>
<tr>
<td><input type="button" class="button" value="4" onClick="insert(4)"></td>
<td><input type="button" class="button" value="5" onClick="insert(5)"></td>
<td><input type="button" class="button" value="6" onClick="insert(6)"></td>
<td><input type="button" class="button" value="-" onClick="insert('-')"></td>
</tr>
<tr>
<td><input type="button" class="button" value="1" onClick="insert(1)"></td>
<td><input type="button" class="button" value="2" onClick="insert(2)"></td>
<td><input type="button" class="button" value="3" onClick="insert(3)"></td>
<td><input type="button" class="button" value="+" onClick="insert('+')"></td>
</tr>
<tr>
<td><input type="button" class="button" value="0" onClick="insert(0)"></td>
<td><input type="button" class="button" value="." onClick="insert('.')"></td>
<td><input type="button" class="button" value="=" onClick="equal('=')"></td>
<td><input type="button" class="button" value="*" onClick="insert('*')"></td>
</tr>
</table>
</div>
<script>
function insert(num){
document.form.textview.value = document.form.textview.value+num;
}
function equal(){
let exp = document.form.textview.value;
if(exp){
document.form.textview.value = eval(exp)
}
else{
console.log('Something Wrong')
}
}
function c(){
document.form.textview.value = null;
}
</script>
</body>
</html>

Categories

Resources