JavaScript Calculator using HTML forms - javascript

I want to create a calculator that, using JavaScript, takes a number from an HTML input box like this one.
// Take form input and multiply by four
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input placeholder="Side Length of Square"/>
</body>
</html>
How could I then relay the user input, say 5, so that the JavaScript would take "5" and multiply it to find the area of the square? This is my first question ever on Stack Overflow, so I apologize if I did something wrong. Thanks for the help!

You would use javascript's onkeyup to calculate the area of a square as the user types in numbers. Check out the code below!
function calc(){
var val=document.getElementById("myInput").value;
document.getElementById("area").innerHTML=Math.pow(val, 2);
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input id="myInput" placeholder="Side Length of Square"onkeyup="calc()"/>
<p>Area : <span id="area"></span></p>
</body>
</html>

First, you need to decide where you want to place your output, e.g. introduce a new <div> element whose text content will hold the computed side length.
Also, you should give your <input> as well as your output <div> a unique id attribute so you can identify it later on from within your JavaScript code.
Then, you would introduce a new <script> before the closing </body> tag. This guarantees that at the time of script execution, all relevant HTML elements have already been loaded and added to the Document Object Model (DOM) so that your script can access them.
Finally, you write a JavaScript "input" event handler and attach it to the <input> element.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="number" id="side-length" placeholder="Side Length of Square">
<div id="area"></div>
<script>
let input = document.getElementById("side-length");
let output = document.getElementById("area");
input.addEventListener("input", function(event) {
let sideLength = input.valueAsNumber;
output.textContent = sideLength * sideLength;
});
</script>
</body>
</html>
Note: Above event handler computes the area of the square with given side length, as per your question and opposed to the comment above your code snippet.

Related

How to take content from an element in a webpage and show it in my html page?

I need to take the content from the elements of a page with a specific class "verse" and show it in my page, that contains a text input (to insert the link of the page where the content is) and a button to trigger the function that does the work.
This is my HTML file.
<!DOCTYPE html>
<html>
<head>
<title>Get Verse 1.0</title>
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
</head>
<body>
<!--takes an input value-->
<input type="text" id="link">
<!--calls the function to display text-->
<input id="clickMe" type="button" value="Enter" onclick="getAndDisplay()">
<p id="actualText"></p>
<script type="text/javascript">
function getAndDisplay(){
//takes the input
let link = document.getElementById('link').value;
//store the <div class=verse>content in a variable
let verse = $('.verse').load('ajax/${link}');
//store the innerHTML of the content in a variable
let htmlContent = verse.innerHTML;
//display the content in a <p>
document.getElementById("actualText").innerHTML = htmlContent;
}
</script>
</body>
</html>
I've already tried with jquery but I couldn't figure out how to solve this problem.
The link that I'm using to do the tests is this https://my.bible.com/it/bible/59/GEN.1.ESV
I'm trying to take all those verses and display just the text (maybe later I will do some style with CSS)
I believe what you're looking for could be something like this:
$( "#actualText" ).load(`ajax/${link} div.verse`);
${link} is called a "template literal" and requires the " ` " sign
The target id in the jquery constructor should probably be the target of where you want the output to go.
The div.verse is the "selector" argument, as read in https://api.jquery.com/load/

Javascript: Taking in User-Input

I have explicitly defined a Javascript file for my HTML document. In my HTML, I have created a text box where the user can type in their name, then click a button called "submit."
In JS, as soon as they click "submit," I want to store what they have entered as their name in a variable (I'm using eventListener to know when they click "submit"). My question is, how would I be able to do this without using onclick in my HTML doc? Here is my following code at the moment:
my_button.addEventListener('click', my_function);
function my_function(){
alert("Hello world!");
}
One way would be to use oninput event and every time the user types in something update the variable in which you want to store the input. The input tag would look like this: <input type="text" oninput="myFunction()"> and in the function that is declared as the handler you can take the input and store wherever you want.
You can have the code separate. All you'd have to do in the HTML document is to load the javascript file.
Here's a snippet. First the content of the javascript file, and below the simplified HTML document.
let myButton = document.getElementById("theButton");
myButton.addEventListener('click', my_function);
function my_function(){
alert("Hello world!");
}
<button id="theButton">Test</button>
to add a separate javascript file do this anywhere in your html
<script type='text/javascript' src = 'path/filename' > </script>
to get the value of the input yoy need to slect it first. then you get the value via the value property.
see this example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<input id="my_input" type="text">
<button id="my_btn">click</button>
</body>
</html>
then you can use the following javascript.
var my_button = document.querySelector('#my_btn');
var my_input = document.querySelector('#my_input');
var value;
my_button.addEventListener('click',function () {
value = my_input.value;
alert(value);
})
hope this helps!

Why doesn't innerHTML work with white spaces?

In the below html, the front button doesn't respond while the back button changes the content of the tag.
<!DOCTYPE html>
<html>
<body>
<p id ="para">Initial text. </p>
<button onClick=document.getElementById('para').innerHTML="move front">
front
</button>
<button onClick=document.getElementById('para').innerHTML="back">
back
</button>
</body>
</html>
In the below, both the buttons change the content of the tag.
<!DOCTYPE html>
<html>
<body>
<p id ="para">Initial text. </p>
<button onClick=document.getElementById('para').innerHTML="movefront">
front
</button>
<button onClick=document.getElementById('para').innerHTML="back">
back
</button>
</body>
</html>
Why does a bank space make a button unresponsive?
That is just invalid HTML.
You have to put quotes around your whole onclick attribute value, otherwise it will end at the space.
onClick = document.getElementById('para').innerHTML="move // cut off here
front" // a second (meaningless) attribute for your button tag.
Please consider this syntax:
<button onclick="document.getElementById('para').innerHTML='move front'">front</button>
You are probably having issues if you are using this technique.
I am sorry but this is not how you attach a click event to elements in modern javascript, at least if you want to work with what's called "good practices".
The better method would be to attach a click event to a desired element using javascript.
I will give you a short code example.
First the HTML - I will use your original HTML (modified a bit):
<!DOCTYPE html>
<html>
<body>
<p id ="para">Initial text. </p>
<button id="frontBtn"> front </button>
<button id="backBtn"> back </button>
</body>
</html>
As you can see, I have removed your "onclick" events from the buttons, and assigned an id to each button.
Second, we will write some javascript to properly attach a click event to each one of the buttons, and of course execute the change of text as you originally was intending to do:
if you are familiar with jQuery then this will do:
$('#frontBtn').on('click',function(){
$('#para').html('move front');
});
$('#backBtn').on('click',function(){
$('#para').html('back');
});
This can also be done with vanilla (native) javascript:
document.getElementById("frontBtn").addEventListener("click", function(){
document.getElementById("para").innerHTML = "move front";
});
document.getElementById("backBtn").addEventListener("click", function(){
document.getElementById("para").innerHTML = "back";
});
Now we have a nicely structured event handler for each button, more code can be easily added.
As for where to insert your javascript ?
You can add the javascript to your html document by using script tags in your html document head like this:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
// your code here..
</script>
</head>
<body>
....
....
Or even better - create a separate script file and load it at the bottom of your html page like this:
<!DOCTYPE html>
<html>
<head>
....
</head>
<body>
....
....
<script type="text/javascript" src="scripts.js"></script>
</body>
</html>
This is the better way to attach events to elements, using javascript.
Imagine if you try to write 50-100 lines of code inline ? impossible! but with an event handler function you can do it easily.
Things will basically work better and your project will be much easier for you to maintain.
Hope it helps a bit!

Create a Stack Overflow-like form

I'm trying to create a form which prints the input directly beneath it, just like here on Stack Overflow when you write a question. However, since I'm new to Javascript and such, I don't know how to search for the correct function (I don't know the correct name for this technique).
Just a push in the right direction will already be a big help! Thanks!
<!doctype html>
<html>
<head>
</head>
<body>
<script>
function myFunction()
{
var input = document.getElementById('fname')
var div = document.getElementById('text');
div.innerHTML = escape(input.value);
}
</script>
<input type="text" id="fname" onkeyup="myFunction()">
<div id="text"></div>
</body>
</html>

Get element via jQuery quickly

I want to fetch the radio input element object.
In this approach, if the page is huge with many radio inputs, then it will take time to iterate over them before returning the object.
Is there a faster approach to get input object other than this? The condition is that the value should start with text '9Z'.
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div>
<td>
<input type="radio" value="9Z>2">
</td>
</div>
<script>
var r = $("input:radio[value^='9Z']");
alert(r.length); //I got the object - length will be greater than 0
</script>
</body>
</html>
:radio is a jquery specific selector, therefore by using it, you're not allowing jquery to use the quicker document.querySelectorAll() method. Simply replace it with the attribute equals selector.
$("input[type=radio][value^='9Z']")
If that still isn't fast enough, we'll need to know more about the structure of your page.
You could also do this for a very small increase (no IE7 support):
$(document.querySelector("input[type=radio][value^='9Z']"))

Categories

Resources