So I have this assignment where im supposed to display output using javascript...
My number keeps saying undefined in the javascript even though I defined it. Is there a mistake I am making? I'm new to javascript. We are practicing using object literals. preview of what is supposed to happen
function displayStudent() {
student = {
firstname: "",
lastname: "",
number: 0
}
student.firstname = document.getElementById("firstname").value;
student.lastname = document.getElementById("lastname").value;
student.number = document.getElementById("studentnumber").value;
display = `${firstname}, ${lastname}, ${number}`;
document.getElementById("studentinfo").innerHTML = display;
}
<fieldset>
<legend>Input Area</legend>
<br><br>
<label for="week">Week Number:</label>
<input type="number" id="week" maxlength="2" size="2" value="0">
<label for="fname">First name:</label>
<input type="text" id="firstname" name="fname">
<label for="lname">Last name:</label>
<input type="text" id="lastname" name="lname">
<label for="studentnumber">Student Number:</label>
<input type="number" id="studentnumber" name="number">
<button id = "button">Generate Lotto Tickets</button>
</fieldset>
<fieldset>
<legend id="display">Display Area</legend>
<label for="title">Module Title:</label>
<output id="wTitle"><i>module title</i></output><br><br>
<label for="fname">Student info:</label>
<output id="studentinfo"><i>Student info</i></output>
<label for="date">Current Date:</label>
<output id="cdate"><i>Current Date</i></output>
</fieldset>
Replace display = `${firstname}, ${lastname}, ${number}`; with display = `${student.firstname}, ${student.lastname}, ${student.number}`;
Related
I have a problem with a bit of my javascript code.
I am trying to get my #showAddress to display: block when the deliverservice radio button is clicked/checked.
I've tried looking at some Stack Overflow posts but a lot of them are too advanced for my current level (I just started JavaScript).
<label>Delivery Type</label>
<input type="radio" name="delivery" value="Pickup" id="pickupService">Pickup
<input type="radio" name="delivery" value="Deliver" id="deliverService">Deliver
</p>
<div id="showAddress">
<p>
<label for="deliveryAddress">Delivery Address</label><br>
<input type="text" name="deliveryAddress" id="deliveryAddress" placeholder="Enter street number + name"><br>
<input type="text" name="deliverySuburb" id="deliverySuburb" placeholder="Enter your [suburb], [state]"><br>
<input type="text" name="deliveryAddress" id="deliveryPostcode" placeholder="Enter your postcode"><br>
Billing address same as Above
</div>
<p>
<label for="billingAddress">Billing Address</label><br>
<input type="text" name="deliveryAddress" id="billingAddress" placeholder="Enter street number + name"><br>
<input type="text" name="deliverySuburb" id="billingSuburb" placeholder="Enter your [suburb], [state]"><br>
<input type="text" name="deliveryAddress" id="billingPostcode" placeholder="Enter your postcode"><br>
</p>
<p>
I believe the error is happening in my JavaScript, however it's only two functions. The first two lines are my initialise function, which is calling my second function down below.
var showDelivery = document.getElementById("deliverService");
showDelivery.onclick = showAddress;
function showAddress() {
document.getElementById("showAddress").style.display= 'block';
}
#additionalInformation, #showAddress {
display: none;
}
You should change this line
showDelivery.onclick = showAddress;
to something like this:
showDelivery.onclick = function(){showAddress();};
Alternatively, you can set the onclick listener on the input element itself (in the html), to directly call the javascript function from the HTML element, rather than cluttering your JavaScript
<input type="radio" name="delivery" value="Deliver" id="deliverService" onclick="showAddress()">Deliver
function showAddress() {
document.getElementById("showAddress").style.display= 'block';
}
#additionalInformation, #showAddress {
display: none;
}
<label>Delivery Type</label>
<input type="radio" name="delivery" value="Pickup" id="pickupService">Pickup
<input type="radio" name="delivery" value="Deliver" id="deliverService" onclick="showAddress()">Deliver
<div id="showAddress">
<p>
<label for="deliveryAddress">Delivery Address</label><br>
<input type="text" name="deliveryAddress" id="deliveryAddress" placeholder="Enter street number + name"><br>
<input type="text" name="deliverySuburb" id="deliverySuburb" placeholder="Enter your [suburb], [state]"><br>
<input type="text" name="deliveryAddress" id="deliveryPostcode" placeholder="Enter your postcode"><br>
Billing address same as Above
</p>
</div>
<p>
<label for="billingAddress">Billing Address</label><br>
<input type="text" name="deliveryAddress" id="billingAddress" placeholder="Enter street number + name"><br>
<input type="text" name="deliverySuburb" id="billingSuburb" placeholder="Enter your [suburb], [state]"><br>
<input type="text" name="deliveryAddress" id="billingPostcode" placeholder="Enter your postcode"><br>
</p>
EDIT: An example of using addEventListener
document.getElementById("deliverService").addEventListener("click", function() {
document.getElementById("showAddress").style.display= 'block';
});
document.getElementById("deliverService").addEventListener("click", function() {
document.getElementById("showAddress").style.display= 'block';
});
#additionalInformation, #showAddress {
display: none;
}
<label>Delivery Type</label>
<input type="radio" name="delivery" value="Pickup" id="pickupService">Pickup
<input type="radio" name="delivery" value="Deliver" id="deliverService">Deliver
<div id="showAddress">
<p>
<label for="deliveryAddress">Delivery Address</label><br>
<input type="text" name="deliveryAddress" id="deliveryAddress" placeholder="Enter street number + name"><br>
<input type="text" name="deliverySuburb" id="deliverySuburb" placeholder="Enter your [suburb], [state]"><br>
<input type="text" name="deliveryAddress" id="deliveryPostcode" placeholder="Enter your postcode"><br>
Billing address same as Above
</p>
</div>
<p>
<label for="billingAddress">Billing Address</label><br>
<input type="text" name="deliveryAddress" id="billingAddress" placeholder="Enter street number + name"><br>
<input type="text" name="deliverySuburb" id="billingSuburb" placeholder="Enter your [suburb], [state]"><br>
<input type="text" name="deliveryAddress" id="billingPostcode" placeholder="Enter your postcode"><br>
</p>
Whenever my form is submitted nothing happens and when I check my array on
the console it remains empty. In order to target values of input I need to put it in a function I also use return in function but nothing happens. Actually I want user data collected in object and push into array whenever I click on submit button...
var labelsarray = document.getElementsByTagName("label");
var inputsarray = document.getElementsByTagName("input");
var array = [];
function subm() {
var users = {
FirstName: inputsarray[0].value,
LastName: inputsarray[1].value,
UserName: inputsarray[2].value,
Password: inputsarray[3].value,
DateofBirth: inputsarray[4].value,
Age: inputsarray[5].value,
Gender: inputsarray[6, 7].checked,
Purpose: inputsarray[8, 9, 10].checked
};
array.push(users);
}
<div>
<center>
<form method="post" onsubmit="subm();">
<label for="fname">First Name:</label>
<input type="text" id="fname" />
<br/>
<label for="lname">Last Name:</label>
<input type="text" id="lname" />
<br/>
<label for="uname">User Name:</label>
<input type="text" id="uname" />
<br/>
<label for="pass">Password:</label>
<input type="text" id="pass" />
<br/>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" />
<br/>
<label>Age:</label>
<input type="text" id="age" />
<br/>
<span>Gender:</span>
<input type="radio" name="gender" id="male" />
<label for="male">Male</label>
<input type="radio" name="gender" id="female" />
<label for="female">Female</label>
<br/>
<p>For what purpose(s) you are making account?</p>
<input type="checkbox" id="app" name="purpose" value="storingapps" />
<label for="app">Storing Apps</label>
<input type="checkbox" id="site" name="purpose" value="storingsites" />
<label for="site">Storing Sites</label>
<input type="checkbox" id="fun" name="purpose" value="fun" />
<label for="fun">Fun</label>
<br/>
<input type="submit" value="Submit" class="button" />
</form>
</center>
</div>
When you push the submit button, you start the form submission process.
First the onsubmit function runs. This modifies your array.
Then the form submits and loads a new page.
This is (presumably) the same page that the user is already looking at. It's a fresh copy of it though, so it doesn't contain the array from the old version of it.
You can return false; at the end of the onsubmit function to prevent form submission.
Modern code would use addEventListener (introduced about two decades ago) and call the preventDefault method of the event object.
document.querySelector("form").addEventListener("submit", subm);
function subm(event) {
event.preventDefault();
// etc
}
I am trying to calculate a value without a submit button. If a user enters the weight, height and number of PCs then my code should calculate the value and display it in the total text field automatically without refreshing the page. How can I do that?
This is my calculation: total = weight * height * no of pcs
<div class="right">
<label>
<span>Id :</span>
<input id="name" type="text" name="roll" />
</label>
<label>
<span>material name :</span>
<input type="text" name="material" placeholder="material Name" />
</label>
<input name="myprice" type="hidden" size="10" maxlength="10" value="1000" readonly/>
<label>
<span>Weight:</span>
<input name="kg" type="text" size="10" maxlength="10" value="0"/>
</label>
<label>
<span> height:</span>
<input name="mytax" type="text" value="0" size="3" maxlength="4"/>
</label>
<label>
<span> no of pcs :</span>
<input name="no" type="text" id="no" value="0" size="3" maxlength="4"/>
</label>
<label>
<span> Total :</span>
<input name="Total" type="text" value="0" size="3" maxlength="4"/>
</label>
</div>
try this code
javascript code
<script type="text/javascript">
function getOrderTotal() {
var iweight= document.myform.weight.value;
var iheight= document.myform.iheight.value;
var ino= document.myform.no.value;
if(!iweight.match(recurrency)) {
alert('Please provide an item cost in 0.00 format!');
}
else {
var ifinal=iweight * iheight * ino;
);
ifinal *= 100;
ifinal = Math.ceil(ifinal);
ifinal /= 100;
if(ifinal) {
ifinal = ifinal;
}
document.getElementById('mytotal').value = ifinal;
}
}
html code
<div class="right">
<label>
<span> Id :</span>
<input id="name" type="text" name="roll" />
</label>
<label>
<span>material name :</span>
<input type="text" name="material" placeholder="material Name" />
</label>
<label>
<span>Weight:</span>
<input name="weight" type="text" id="weight" onchange="getOrderTotal()" size="10" maxlength="10" value="0"/>
</label>
<label>
<span> height:</span>
<input name="height" id="height" type="text" onchange="getOrderTotal()" value="0" size="3" maxlength="4"/>
</label>
<label>
<span> no of pcs :</span>
<input name="no" type="text" id="no" onchange="getOrderTotal()" value="0" size="3" maxlength="4"/>
</label>
<label>
<span> Total :</span>
<input name="Total" type="text" id="mytotal" value="0" size="3" maxlength="4"/>
</label>
</div>
with jquery
$( '[name="mytax"]' ).change(function() {
//add here your formula
});
You will Use something like this
Include jquery code in your file
<script>
$(document).ready(function() {
$('input[name="no"]').keyup(function() {
var kg = $('input[name="kg"]').val();
var mytax = $('input[name="mytax"]').val();
var no = $('input[name="no"]').val();
var total = parseInt(kg) * parseInt(mytax) * parseInt(no);
$('input[name="Total"]').val(total);
});
});
</script>
Hope it will Work
Try this:
In html add ids to all input fields so that we can easily identify any element:
<div class="right">
<label>
<span> Id :</span>
<input id="name" type="text" name="roll" />
</label>
<label>
<span>material name :</span>
<input type="text" name="material" placeholder="material Name" />
</label>
<input name="myprice" id="myprice" type="hidden" size="10" maxlength="10" value="1000" readonly/>
<label>
<span>Weight:</span>
<input name="kg" id="kg" type="text" size="10" maxlength="10" value="0"/>
</label>
<label>
<span> height:</span>
<input name="mytax" id="mytax" type="text" value="0" size="3" maxlength="4"/>
</label>
<label>
<span> no of pcs :</span>
<input name="no" id="no" type="text" value="0" size="3" maxlength="4"/>
</label>
<label>
<span> Total :</span>
<input name="total" id="total" type="text" value="0" size="3" maxlength="4"/>
</label>
</div>
jquery:
1) check if value not then store value in any variable with parseFloat
here we have use parseFloat because because price or weight may be in float value.
$( document ).ready(function() {
$('#kg, #mytax, #no').change(function () {
var kg = ($("#kg").val() != "") ? parseFloat($("#kg").val()) : 0;
var mytax = ($("#mytax").val() != "") ? parseFloat($("#mytax").val()) : 0;
var no = ($("#no").val() != "") ? parseFloat($("#no").val()) : 0;
var total = kg * mytax * no;
$('#total').val(total);
});
});
Without using JQuery or any other JavaScript Library, the plain vanilla JavaScript solution will be to tap the "keypress" event.
Here is an example code just to give you the idea:
<html>
<head>
<script>
function calculate () {
var a = document.getElementById("a").value;
var b = document.getElementById("b").value;
document.getElementById("result").innerHTML = a * b;
}
</script>
</head>
<body>
First Value <input type="text" id="a"></input>
<br>
Second Value <input type="text" id="b" onkeyup="calculate()"></input>
<br>
<div id="result"></div>
</body>
</html>
The function calculate() is invoked on key press. It takes the value and does the multiplication.
You can try this.
<div class="right">
<label>
<span>Id :</span>
<input id="name" type="text" name="roll" />
</label>
<label>
<span>material name :</span>
<input type="text" name="material" placeholder="material Name" />
</label>
<input name="myprice" type="hidden" size="10" maxlength="10" value="1000" readonly/>
<label>
<span>Weight:</span>
<input name="kg" type="text" id="weight" onblur="findTotal()" size="10" maxlength="10" value="0"/>
</label>
<label>
<span> height:</span>
<input name="mytax" type="text" id="height" onblur="findTotal()" value="0" size="3" maxlength="4"/>
</label>
<label>
<span> no of pcs :</span>
<input name="no" type="text" id="nopc" onblur="findTotal()" value="0" size="3" maxlength="4"/>
</label>
<label>
<span> Total :</span>
<input name="Total" type="text" id="total" value="0" size="3" maxlength="4"/>
</label>
</div>
<script type="text/javascript">
function findTotal(){
var weight = document.getElementById('weight').value;
var height = document.getElementById('height').value;
var pc = document.getElementById('nopc').value;
total = weight * height * pc;
if(isNaN(total)){
alert("Please enter only numbers");
}
document.getElementById('total').value = total;
}
</script>
I'm the beginner of JS. I try to get input from the HTML form. And print words out from function. I have read JS in W3. However, it keeps going wrong. Could somebody give me a hand.
HTML - about the form
<form method="get">
<h2>Please leave your contact information for us</h2>
<label for="FirstName">First Name:</label>
<input type="text" id="FirstName" name="firstName" placeholder="Your First Name"><br>
<label for="LastName">Last Name:</label>
<input type="text" id="LastName" name="LastName" placeholder="Your last Name"><br>
<label for="email">E-mail:</label>
<input type="e-mail" id="email" name="eMail"><br>
<label for="password">Password:</label>
<input type="password" id="password" name="passWord"><br>
<label for="suGession">sub gesstion:</label><br>
<textarea name="suggestion" id="suGession" cols="30" rows="10"></textarea>
<br>
<br>
<p>What do you usually cook?</p>
<input type="text">
<button type="submit" onclick="welcome()">Give Us Help</button>
</form>
My JS code
var first = document.getElementById("FirstName");
var last = document.getElementById("LastName");
function welcome(){
var welcomeF = "Welcome" + first +" "+ last;
return welcomeF;
}
console.log(welcome());
Use first.value to get the value of the element & use onSubmit attribute in instead of using onclick.
Have a look at this code, I did some changes in your code.
Javacript :
function welcome(){
var first = document.getElementById("FirstName").value;
var last = document.getElementById("LastName").value;
var welcomeF = "Welcome " + first +" "+ last;
console.log(welcomeF);
window.alert(welcomeF);
return false; //To prevent it from going into next page.
}
Html :
<form onSubmit = "return welcome();">
<h2>Please leave your contact information for us</h2>
<label for="FirstName">First Name:</label>
<input type="text" id="FirstName" name="firstName" placeholder="Your First Name"><br>
<label for="LastName">Last Name:</label>
<input type="text" id="LastName" name="LastName" placeholder="Your last Name"><br>
<label for="email">E-mail:</label>
<input type="e-mail" id="email" name="eMail"><br>
<label for="password">Password:</label>
<input type="password" id="password" name="passWord"><br>
<label for="suGession">sub gesstion:</label><br>
<textarea name="suggestion" id="suGession" cols="30" rows="10"></textarea><br><br>
<p>What do you usually cook?</p>
<input type="text">
<button type="submit" >Give Us Help</button>
You need to change:
var welcomeF = "Welcome" + first +" "+ last;
to:
var welcomeF = "Welcome" + first.value +" "+ last.value;
first and last are just references to the dom nodes, not the value in them
I have 5 6 fields that whom data I need to get in below 6 fields as well. The problem here is some of the values are not copying in the appropriate text fields.
I am posting my html as well. It's small form.
My html with js in it as well.
<input class="width_367" type="text" name="fname" id="email" required>
<input class="width_367" type="text" name="mname" id="pass" required>
<input class="width_367" type="text" name="lname" id="email" required>
<input class="width_367" type="text" name="address" id="address" required>
<input class="width_367" type="text" name="city" id="city" required>
The checkbox:
<p align="left" style="width: 425px !important;">
<input type="checkbox" name="chkOption" value="yes">
Check here if Recipient Address is the same as Billing Address </p>
<input class="width_367" type="text" name="rfname" id="email" />
<input class="width_367" type="text" name="rmname" id="pass" />
<input class="width_367" type="text" name="rlname" id="email" />
<input class="width_367" type="text" name="raddress" id="address" />
<input class="width_367" type="text" name="rcity" id="city" />
onclick="javascript: if (chkOption.checked){
rfname.value=fname.value;
rmname.value=mname.value;
rlname.value=lname.value;
raddress.value=address.value;
rcity.value=city.value;
rstate.value=state.value;
recstate.value=usestate.value;
rCountry.value=Country.value;
rzip.value=zip.value;
remail.value=email.value;
}else{
rfname.value = '';
rmname.value = '';
rlname.value = '';
raddress.value = '';
rcity.value = '';
rstate.value = '';
recstate.value = '';
rCountry.value = '';
rzip.value = '';
remail.value = '';
}"