I'm a beginner and don't understand why the following shows as undefined.
The following is my script:
function pythagoras() {
function solvepy(form) {
var a = parseFloat(form.a.value);
var b = parseFloat(form.b.value);
c.value = Math.sqrt(a * a + b * b);
}
function pythagoras(form) {
var aInput = document.getElementById("a");
var bInput = document.getElementById("b");
}
var result = displayResult();
}
function displayResult(a, b, c) {
var div = document.getElementById("result");
div.innerHTML = "Triangle: a = " + a + ", b = " + b + ". c = " + c;
}
The following is my body:
<form>
<label for="a">Enter lengths for sides a: </label>
<input type="number" id="a" size="3">
<label for="b"> and b: </label>
<input type="number" id="b" size="3"><br>
<input type="button" id="submit" value="Compute c!">
</form>
<div id="result">
</div>
Try this ..
Javascript :
// Set global variables, so they can be accessed trough all functions
var a, b, c;
function calculate() {
a = parseFloat(document.pythagora.a.value);
b = parseFloat(document.pythagora.b.value);
c = Math.sqrt(a * a + b * b);
displayResult(a,b,c);
}
function displayResult(a, b, c) {
var div = document.getElementById("result");
div.innerHTML = "Triangle: a = " + a + ", b = " + b + ". c = " + c;
}
Body
<form name="pythagora">
<label for="a">Enter lengths for sides a: </label>
<input type="number" id="a" size="3">
<br>
<label for="b"> and b: </label>
<input type="number" id="b" size="3"><br>
<br>
<input type="button" id="submit" value="Compute c!" onClick="calculate();">
</form>
<div id="result">
</div>
Here is a working example link..(click here)
Related
I want to create a function afficher() / print() that shows the name and email of the selected option
// ajouter() = add()
// supprimer() = delete()
// afficher() = print()
function ajouter() {
let fullName = document.getElementById("name").value;
let mail = document.getElementById("email").value;
myList = [];
myList.push({
name: fullName,
email: mail
})
document.getElementById("list").innerHTML += '<option>' + fullName + '</option>' + '<br>';
}
function supprimer() {
let del = document.getElementById("list");
del.remove(del.selectedIndex);
}
// function afficher(){
// let show = document.getElementById("list")
// let showName = myList[show.selectedIndex].name,
// showEmail = myList[show.selectedIndex].email;
// alert("Hello " + showName + " Your email is : " + showEmail);
// }
<form action="">
<br><br>
<label for="name">Full name : <input id="name" type="text"></label><br><br>
<label for="email">Email : <input id="email" type="email"></label><br><br><br>
<button type="button" onclick="ajouter()">Ajouter</button>
<button type="button" onclick="supprimer()">Supprimer</button>
<button type="button" onclick="afficher()">Afficher l'addresse</button>
<br><br>
<select name="names-list" id="list" size="5" style="width: 200px;">
</select>
</form>
You need to move myList = [] outside the functions
Here is a fully working version
Uncomment the parts with localStorage to save the list
const myListString = null// localStorage.getItem("list");
const myList = myListString ? JSON.parse(myListString) : [];
const list = document.getElementById("list");
function ajouter() {
let fullName = document.getElementById("name").value;
let mail = document.getElementById("email").value;
myList.push({
name: fullName,
email: mail
})
list.add(new Option(fullName));
// localStorage.setItem("list", JSON.stringify(myList))
}
function supprimer() {
const fullName = document.getElementById("name").value;
const idx = myList.findIndex(item => item.name === fullName)
if (idx !=-1) {
myList.splice(idx,1)
list.options[idx].remove()
}
}
function afficher() {
const idx = list.selectedIndex;
const person = myList[idx]
alert("Hello " + person.name + " Your email is : " + person.email);
}
<form action="">
<br><br>
<label for="name">Full name : <input id="name" type="text"></label><br><br>
<label for="email">Email : <input id="email" type="email"></label><br><br><br>
<button type="button" onclick="ajouter()">Ajouter</button>
<button type="button" onclick="supprimer()">Supprimer</button>
<button type="button" onclick="afficher()">Afficher l'addresse</button>
<br><br>
<select name="names-list" id="list" size="5" style="width: 200px;">
</select>
</form>
I put my JavaScript inside tags instead of externally(because external files weren't working) and for some reason my code is not running.
Just to be sure that it wasn't a problem with the code itself, I put a simple alert before all the code and nothing popped up.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Fahrenheit/Kelvin Converter</h1>
<div id = "first" class = "oneof">
<h2>Kelvin to Fahrenheit</h2>
<input type = "text" placeholder = "Enter Kelvin here" id = "kinput">
<button id = "ksubmit">Submit Kelvin</button><br><br>
<textarea id = "fpopup" rows = "5" cols = "50"></textarea>
</div>
<div id = "second" class = "oneof">
<h2>Fahrenheit to Kelvin</h2>
<input type = "text" placeholder = "Enter Fahrenheit here" id = "finput">
<button id = "fsubmit">Submit Fahrenheit</button><br><br>
<textarea id = "kpopup" rows = "5" cols = "50"></textarea>
</div>
<script>
alert("Hello World"); //Testing JS
if(6==6){
alert("ua");
}
function ftok(f){
k = (f − 32) * 5/9 + 273.15;
return k;
}
function ktof(k){
f = (K − 273.15) * 9/5 + 32;
return f;
}
document.getElementById("ksubmit").onclick = function() {
document.getElementById("fpopup").value = document.getElementById("kinput").value + " degrees Kelvin is " + ktof(Number(document.getElementById("kinput").value)) + " degrees Fahrenheit"
}
document.getElementById("fsubmit").onclick = function() {
document.getElementById("kpopup").value = document.getElementById("finput").value + " degrees Fahrenheit is " + ftok(Number(document.getElementById("finput").value)) + " degrees Kelvin"
}
</script>
</body>
</html>
You can use DOMContentLoaded function to make sure the HTML is ready and parsed properly. Also you have some syntax errors which i have fixed as well.
Also, You were using some weird minus and multiplication characters.
The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed
Your code is now working as expected.
Live Demo:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Fahrenheit/Kelvin Converter</h1>
<div id="first" class="oneof">
<h2>Kelvin to Fahrenheit</h2>
<input type="text" placeholder="Enter Kelvin here" id="kinput">
<button id="ksubmit">Submit Kelvin</button><br><br>
<textarea id="fpopup" rows="5" cols="50"></textarea>
</div>
<div id="second" class="oneof">
<h2>Fahrenheit to Kelvin</h2>
<input type="text" placeholder="Enter Fahrenheit here" id="finput">
<button id="fsubmit">Submit Fahrenheit</button><br><br>
<textarea id="kpopup" rows="5" cols="50"></textarea>
</div>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
if (6 == 6) {
alert("ua");
}
function ftok(f) {
var k = (f - 32) * 5 / 9 + 273.15;
return k;
}
function ktof(k) {
var f = (k - 273.15) * 9 / 5 + 32;
return f;
}
document.getElementById("ksubmit").onclick = function() {
document.getElementById("fpopup").value = document.getElementById("kinput").value + " degrees Kelvin is " + ktof(Number(document.getElementById("kinput").value)) + " degrees Fahrenheit"
}
document.getElementById("fsubmit").onclick = function() {
document.getElementById("kpopup").value = document.getElementById("finput").value + " degrees Fahrenheit is " + ftok(Number(document.getElementById("finput").value)) + " degrees Kelvin"
}
})
</script>
</body>
</html>
I want to re-generate user's input values onto textarea with specific format.
I've created input and 'select' with various 'options' inside as well as 'button' that triggers the function.
Can someone please tell me what I'm doing wrong here..?
<SCRIPT>
function myFunction() {
var finaL = document.getElementById("textArea").value;
var spacE = " | ";
var a = document.getElementById("input1").value;
var b = document.getElementById("input2").value;
var c = document.getElementById("selecT").value;
finaL = a + spacE + b + spacE + c;
}
</SCRIPT>
In your code your are getting the value of the textarea and storing it in final variable which is just a string. What you need to do is get the reference of the textarea in the final variable and then set the value.
Working Code:
function myFunction() {
var finaL = document.getElementById("textArea");
var spacE = " | ";
var a = document.getElementById("input1").value;
var b = document.getElementById("input2").value;
var c = document.getElementById("selecT").value;
finaL.value = a + spacE + b + spacE + c;
}
<label for="input1">Male</label>
<input name="input1" id="input1" /> <br>
<label for="input2">Input 3</label>
<input name="input2" id="input2" /> <br>
<label for="selecT">Input 3</label>
<select id="selecT">
<option value="Value 1">Value 1</option>
<option value="Value 2">Value 2</option>
<option value="Value 3">Value 3</option>
</select>
<br>
<button type="button" onclick="myFunction()">Copy</button>
<br>
<label>Result</label>
<textarea id="textArea"></textarea>
just update code to this
<SCRIPT>
function myFunction() {
var finaL = document.getElementById("textArea").value;
var spacE = " | ";
var a = document.getElementById("input1").value;
var b = document.getElementById("input2").value;
var c = document.getElementById("selecT").value;
document.getElementById("textArea").value = a + spacE + b + spacE + c;
}
</SCRIPT>
what i change is from this
value = a + spacE + b + spacE + c;
to this
document.getElementById("textArea").value = a + spacE + b + spacE + c;
Prints '2 x 10 = 20' but not the whole table when the input is 2. I tried various means. But the result is same.
No error. Just like to print the whole multiplication table.
function loop() {
var i = 1;
var x = document.getElementById("num").value;
//document.getElementById("result").value = result;
while (i <= 10) {
document.getElementById("result").value = x + " x " + i + " = " + i * x;
i++;
}
}
<h1>While loop: </h1>
<p>The while loop keeps repeating an action until an associated condition returns false.</p>
<img src="images/loop.jpg" /><br/>
<img src="images/loop2.jpg" /><br/>
<body>
<p>JavaScripts Runs:</p>
<script src="while_1loop.js">
</script><br/> What number table would you like to have?<input type="number" name="" id="num" /><br>
<button type="button" onclick="loop()" ;>Start</button><br>
<textarea rows="12" cols="15" id="result" readonly>
</textarea><br/>
You are always changing the value of 'result' rather than adding to it:
function loop() {
var i = 1;
var x = document.getElementById("num").value;
//document.getElementById("result").value = result;
while (i <= 10) {
var result = document.getElementById("result");
var sum = document.createTextNode(x + " x " + i + " = " + i * x + "\n");
result.appendChild(sum);
i++;
}
}
<h1>While loop: </h1>
<p>The while loop keeps repeating an action until an associated condition returns false.</p>
<img src="images/loop.jpg" /><br/>
<img src="images/loop2.jpg" /><br/>
<body>
<p>JavaScripts Runs:</p>
<script src="while_1loop.js">
</script><br/> What number table would you like to have?<input type="number" name="" id="num" /><br>
<button type="button" onclick="loop()" ;>Start</button><br>
<textarea rows="12" cols="15" id="result" readonly>
</textarea><br/>
If I understand what you mean,
You rewrite whole textarea with this code:
document.getElementById("result").value = x + " x " + i + " = " + i * x;
but you need add new result after older results. Something like this:
var oldValue = document.getElementById("result").value;
var result = x + " x " + i + " = " + i * x;
document.getElementById("result").value = oldValue + '\n' + result;
Trying to have it so that when the user hit's submit it will show their info inputted and calculated volume/cost that's done in javascript. However the submit button isn't showing anything when clicked. Sorry for my poor english and if it's not clear. Let me know if you need anything clarified. Here's the related code:
HTML:
<form name="landscape" action="index.html" onsubmit="return validateForm()" method="post">
...
...
<h3>Type of Planter:</h3>
<input type="radio" name="inputcontrol" value="10" id="inputcontrol1" onchange="setvisible(this.value)">Square/Rectangular Cubes
<input type="radio" name="inputcontrol" value="12" id="inputcontrol2" onchange="setvisible(this.value)">Flat bottmed cylinders
<br>
<input type="radio" name="inputcontrol" value="15" id="inputcontrol3" onchange="setvisible(this.value)">1/2 Spherical
type="radio" name="inputcontrol" id="inputcontrol4" value="20" onchange="setvisible(this.value)">Truncated Cone
<br>
<br>
Length:<p><input type="text" size="10" id="set1" style="visibility:hidden;" ></p>
Width:<p><input type="text" size="10" id="set2"style="visibility:hidden;" ></p>
Height:<p><input type="text" size="10" id="set3"style="visibility:hidden;" ></p>
Radius:<p><input type="text" size="10" id="set4"style="visibility:hidden;" ></p>
Radius2:<p><input type="text" size="10" id="set5"style="visibility:hidden;" ></p>
<input type=submit value="Submit" onClick="buttonandchecks();">
</form>
<br>
<br>
<h2>Order Form: </h2><h2><span id="result"></span></h2>
</body>
</html>
JAVASCRIPT:
function buttonandchecks()
{
var x;
var radio_value;
var planter="";
var infooutput="";
var total=parseFloat(0);
var volume=parseFloat(0);
var length = document.getElementById("set1").value;
var width = document.getElementById("set2").value;
var height = document.getElementById("set3").value;
var radius = document.getElementById("set4").value;
var radius2 = document.getElementById("set5").value;
var inputcontrol1 = document.getElementById("inputcontrol1");
var inputcontrol2 = document.getElementById("inputcontrol2");
var inputcontrol3 = document.getElementById("inputcontrol3");
var inputcontrol4 = document.getElementById("inputcontrol4");
for(x=0;x<document.landscape.inputcontrol.length;x++)
{
if(document.landscape.inputcontrol[x].checked)
{
radio_value=document.lanscape.inputcontrol[x].value;
}
}
radio_value=parseFloat(radio_value);
if(inputcontrol1.checked)
{
volume = length * width * height;
planter = "Square/Rectangular Cubes";
}
if(inputcontrol2.checked)
{
volume = 3.14 * radius * radius * height;
planter = "Flat bottomed cylinders";
}
if(inputcontrol3.checked)
{
volume = 1/2 * (4/3* 3.14 * radius * radius * radius);
planter = "1/2 Spherical";
}
if(inputcontrol4.checked)
{
volume = 1/3*3.14*(radius*radius*radius*radius2*radius2*radius2)*height;
planter = "Truncated cone";
}
total=radio_value * volume;
infooutput=("Firstname: " + (Text1).value + " Lastname: " + (Lname).value + " \nAddress: " + (Add).value + " \nPostal Code: " + (StPrv).value + "\n\n Planter: " + planter + "\nLength: " + length + " Width: " + width + " Height: " + height + " radius: " + radius + " 2nd radius: " + radius2 + "\n Volume: " + volume + "\n Total: " + total);
document.getElementById("result").innerHTML=infooutput;
}
Any help would be greatly appreciated. Sorry if my code isn't that good, I just started learning a week ago. Thank you!
Theres a few things that need updating.
HTML
Your last input is not structured correctly.
type="radio" name="inputcontrol" id="inputcontrol4" value="20" onchange="setvisible(this.value)">Truncated Cone
Instead, try:
<label><input type="radio" name="inputcontrol" id="inputcontrol4" value="20" onchange="setvisible(this.value)" />Truncated Cone</label>
JavaScript
Things like document.landscape.inputcontrol[x].checked and (Text1).value are not valid ways to access DOM elements. Instead, try document.getElementById() or document.getElementsByName()
For example, change
for(x=0;x<document.landscape.inputcontrol.length;x++)
{
if(document.landscape.inputcontrol[x].checked)
{
radio_value=document.lanscape.inputcontrol[x].value;
}
}
To this: (notice the bracket positions and indents for readability)
checkboxes = document.getElementsByName('inputcontrol');
for(x=0;x<checkboxes.length;x++) {
if(checkboxes[x].checked) {
radio_value=checkboxes[x].value;
}
}
Finally, if your validateForm() function is going to return true, then your form will post to index.html and the page will load losing anything that happened in buttonandchecks(). Instead, you may need to have that method return false, or remove the form tag.
For some examples of those changes, you can see it working in this JS Fiddle: https://jsfiddle.net/igor_9000/qfz6dr25/2/
Hope that helps!