I am trying to use javascript to create a web calculator. I hope that users can calculate the result when they click the different buttons. However, there is an error in line16(Uncaught TypeError: Cannot read property 'onclick' of null). I hope someone could help me. These are my codes:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
</style>
<script type="text/javascript">
var btnadd,btnsub,btnmul,btndiv;
btnadd = document.getElementById('btnadd');
btnsub = document.getElementById('btnsub');
btnmul = document.getElementById('btnmul');
btndiv = document.getElementById('btndiv');
btnadd.onclick() = function(){
cal(add());
}
function cal(func){
var num1 = document.getElementById('num1').value;
var num2 = document.getElementById('num2').value;
parseFloat(num1);
parseFloat(num2);
var result;
result = func(num1,num2);
document.getElementById('result').value = result;
}
function add(num1,num2){
return (num1+num2);
}
function sub(num1,num2){
return (num1-num2);
}
function mul(num1,num2){
return (num1*num2);
}
function div(num1,num2){
return (num1/num2);
}
</script>
</head>
<body>
<form>
num1:<input type="text" id="num1" /><br>
num2:<input type="text" id="num2" /><br>
<input type="button" id="btnadd" value="add" />
<input type="button" id="btnsub" value="sub" />
<input type="button" id="btnmul" value="mul" />
<input type="button" id="btndiv" value="div" /><br>
result:<input type="text" id="result"/>
</form>
</body>
</html>
You need to either add the defer attribute to your script or put it at the end of the body.
Putting JS code in the head means that it will be run before the page is fully parsed. That means that there is no element with the id of btnadd just yet. If you add the defer attribute, then it will wait for the page to be parsed before running the script. Putting at the end of the body has the same effect.
In terms of your code itself, you need to set the onclick property. You cannot assign a function like that. Also, do val2 = parseFloat(val2) rather than parseFloat(val2). (similarly for val1) because here you need to reassign the value
Because you didn't define the onclick correctly
Instead of
btnadd.onclick() = function(){
cal(add());
}
try
btnadd.onclick = function(){
cal(add);
}
Check this codepen : https://codepen.io/zecka/pen/NWrejxO
Note that there are other errors in your code that will prevent you from making it work as you want.
Related
I'm trying to have a user input a string or number on the page, hit submit and have console.log print the string just entered, however as much as I tried it will not print.
Am I missing something here? ( sorry for indentation)
<html>
<head>
<body>
<form>
<input id="userInput" type="text">
<input type="submit" id = "submit()">
</form>
<script>
function submit() {
var test = document.getElementById("userInput");
return console.log(test);
}
</script>
</body>
</head>
</html>
This code will give the result as you expect.you cannot return console.log in return function to get value and also dont use form so that it will always look for action in these kind of cases
function submit() {
var test = document.getElementById("userInput").value;
console.log(test);
return test;
}
<div>
<input id="userInput" type="text">
<button onclick = "submit()"> Submit</button>
</div>
You're doing a few things wrong. Just read the below code, I left explaining comments for you.
<html>
<head>
<body>
<form>
<input id="userInput" type="text">
<button type="button" id="submitBtn" onclick="submit()">Submit</button> // ID - can't be used for submitting a function
</form>
<script>
function submit() {
var test = document.getElementById("userInput");
alert(test.value); // console.log() - is like a void function and it can't be returned
}
</script>
</body>
</head>
</html>
If you look in the console you'll see it's logging a reference to the element, not the value entered in it.
This is because your variable test stores a reference to the element.
var test = document.getElementById("userInput");
You need
var test = document.getElementById("userInput").value;
use Onclick attribute for Submit button! and Also the type of input should be button to prevent the refreshing.
<form>
<input id="userInput" type="text">
<input type="button" onclick= "submit()">
</form>
in JavaScript Code add the value property.
var test = document.getElementById("userInput").value;
Please check the below code. I think this is what you want. The problem was hooking up the event
<form>
<input id="userInput" type="text">
<input id="myBtn" type="submit">
</form>
<script>
document.getElementById("myBtn").addEventListener("click", function() {
var test = document.getElementById("userInput");
console.log(test);
return false;
});
</script>
So far I have been able to come up with something like this. And i have been able to send something to an array, but in the display, thats what i have not been able to achieve so far.
Hence i am asking, How do i display it?
<!doctype html>
<html>
<head>
<script type=text/javascript>
var array = [];
function add_element_to_array() {
array.push(document.getElementById("institution_name").value);
array.push(document.getElementById("degree_obtained").value);
array.push(document.getElementById("honors_acheieved").value);
document.getElementById("institution_name").value = "";
document.getElementById("degree_obtained").value = "";
document.getElementById("honors_acheieved").value = "";
}
function display_array()
{
// Display array
}
</script>
</head>
<title>Test Javascript</title>
<h1>Test JS</h1>
<body>
<form name="xform" id="xform" method="post" action="samris.php" /> Institution Name:
<input type="text" name="institution_name" id="institution_name" /> </br>
Degree Obtained:
<input type="text" name="degree_obtained" id="degree_obtained" />
</br>
Honors Achieved:
<input type="text" name="honors_acheieved" id="honors_acheieved" />
</br>
</p>
<input type="button" name="Add" id="add" value="add" onclick="add_element_to_array()" />
</form>
<div onload= display_array()>
</div>
</body>
</html>
To display array:
function display_array(){
var display = array.join('<br>');
this.innerHTML = display; // only works if you call it inline (except onload).
/* OR */
// works everywhere when you add an id to the div except onload (see explanation below).
document.getElementById('display').innerHTML = display;
}
/* ... in the HTML ... */
<div id="display"></div>
However you will still not able to display it in the div because of the onload=display_array().
When the div is being loaded, display_array() will be called. However when it is being loaded, array is still empty because nothing has been added to it yet by onclick=add_element_to_array().
To do that, you can call display_array() from within add_element_to_array() like so:
function add_element_to_array(){
/*
your code
*/
display_array();
}
Alternatively, you need to remove the onclick and replace by addEventListener in your <script>. However, you will need to move your <script> tag to the bottom of your <body> tag or otherwise implement a function similar to jQuery's ready().
I'm trying to create a JavaScript to modify the number in my input field.
Example:
<input value="0">
And then a simple button or div with a JavasSript click function.
<button>Add +10</button>
After clicking on the button:
<input value="10">
Does someone have a place I can read and learn to create this, or any tips to get me started. I know very little JavaScript, but I wish to learn.
Try this or fiddleLink.
ParseInt helps in converting the string value to numbers and add them instead of concatenating. Let me know if you still have some trouble.
var tag1Elem = document.getElementById("tag1");
// The callback function to increse the value.
function clickFN() {
tag1Elem.value = parseInt(tag1Elem.value, 10) + 10;
}
// Reset the value back to 0
function resetFN() {
tag1Elem.value = 0;
}
// Callbacks can be attached dynamically using addEventListener
document.getElementById("btn").addEventListener("click", clickFN);
document.getElementById("reset").addEventListener("click", resetFN);
#wrapper {
margin: 20px;
}
<p>This is a basic tag input:
<input id="tag1" value="0" />
<button type="button" id="btn">Add +10</button>
<button type="button" id="reset">Reset</button>
</p>
You can try this
<input value="0" id="id">
give a id to input field
on button click call a function
<button onclick="myFunction()">Add +10</button>
<script>
function myFunction() {
document.getElementById("id").value = parseInt(document.getElementById("id").value) +10;
}
</script>
You can use a click counter like this
and edit it replacing += 1 with += 10.
Here my code,
var input = document.getElementById("valor"),
button = document.getElementById("buttonvalue");
var clicks = 0;
button.addEventListener("click", function()
{
clicks += 10;
input.value = clicks;
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Script</title>
</head>
<body>
<input id="valor" value="0">
<button id="buttonvalue">10</button>
</body>
</html>
I have some html and some javascript code that is supposed to take input in a text box, and open a new tab with the Wikipedia page of whatever was in the text box. However, I'm using this as an extension, and google chrome doesn't allow inline javascript.
page.js
document.getElementById("search").addEventListener("click", searchPage);
function searchPage() {
console.log("test")
var temp = document.getElementById(pageName);
var temp = temp.value;
var myPage = "http://en.wikipedia.org/wiki/" + temp;
window.location.replace(myPage);
}
popup.html
<!DOCTYPE html>
<html>
<body>
Random
Enter page to lookup: <input type="text" id="pageName" /><br />
<input type="submit" value="Submit" id="search" />
<script src="./page.js></script>
</body>
</html>
Anyone have any clue why this isn't working?
what you can do instead is include your JS in your HTML <head> tag, and add an onClick attribute to your button, like so:
<!DOCTYPE html>
<html>
<body>
<a href="http://en.wikipedia.org/wiki/Special:Random/" target="_blank">$
Enter page to lookup: <input type="text" id="pageName" /><br />
<input type="submit" value="Submit" id="search" />
<script src="./page.js"></script>
</body>
</html>
I think the problem was that in your original code, you had <script src="./page.js></script> instead of <script src="./page.js"></script>
then you can change your javascript to be the following:
document.getElementById('search').addEventListener('click', searchPage);
function searchPage() {
console.log("hjabdfs");
var temp = document.getElementById('pageName');
var temp = temp.value;
var myPage = "http://en.wikipedia.org/wiki/" + temp;
window.location.replace(myPage);
}
please note that I also changed var temp = document.getElementById(pageName) to var temp = document.getElementById('pageName'), as pageName is not a variable.
Input type submit is trying to submit a form. You need to add an action to that submit button or you can change it to a button and the event will fire.
Your click event listener doesn't work because it has not been loaded yet. Or in other words, you need to make sure this line <script src="./page.js></script> is correctly pointing to page.js.
I've just started teaching myself JavaScript and am doing some basic exercises. Right now I'm trying to make a function that takes in three values and prints out the largest. However, the function refuses to fire upon button click. I tried making a separate, very simple function just for debugging and it refuses to fire as well. I've written other practice functions in almost the exact same manner (they had two parameters as opposed to three) that work fine. Any insight would be greatly appreciated.
<!DOCTYPE HTML>
<html>
<head>
<script type = "text/javascript">
<!--
//Define a function Max() that takes three numbers as
//arguments and returns the largest of them.
function Boo(){
document.write("boo");
alert("boo");
}
function Max(p1, p2, p3){
document.write(p1+p2+p3);
alert('BOO!')
document.write(document.getElementById('value1').value);
var max = Number(p1);
v2 = Number(p2):
v3 = Number(p3);
if (v2 > max)
max = v2;
if (v3 > max)
max = v3;
document.write(max);
}
-->
</script>
</head>
<body>
<form>
<input type="text" id="value1" name="value1"/><br />
<input type="text" id="value2" name="value2"/><br />
<input type="text" id="value3" name="value3"/><br />
<input type = "button"
onclick="Boo()"
value = "Compare!"/>
<!-- onclick="Max(document.getElementById('value1').value,
document.getElementById('value2').value,
document.getElementById('value3').value)" -->
</form>
</body>
</html>
v2 = Number(p2):
should be
v2 = Number(p2);
Also, look into the developer tools for whatever browser you are using to find simple syntax errors like this. (In most browsers you can press F12).
chrome developer tool says it has syntax error!
v2 = Number(p2):
should be:
v2 = Number(p2);
Your javascript functions are commented out with <!-- -->
This is all you need:
var elements = document.getElementsByName('to_compare');
var elementsAsArray = [].slice.call(elements);
var numberValues = elementsAsArray.map(function(x) {
return Number(x.value)
});
return Math.max.apply(this, numberValues);
Full demo, including using console.log rather than document.write, also including how to append to document without clearing it: http://jsfiddle.net/yYhjD/1/
<head>
<script type="text/javascript">
function compare() {
var elements = [].slice.call(document.getElementsByName('to_compare'));
var numberValues = elements.map(function(x){return Number(x.value)});
return Math.max.apply(this, numberValues);
}
</script>
</head>
<body>
<input type="text" id="value1" name="to_compare" value="-10"/>
<input type="text" id="value2" name="to_compare" value="080"/>
<input type="text" id="value3" name="to_compare" value="79"/>
<br/>
<input type="button" onclick="console.log(compare())" value="Compare!"/>
</body>