JavaScript function won't fire on button click - javascript

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>

Related

Why the button object can not use the onclick() function?

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.

Cannot Pass InputBox String value From HTML To Google Apps Script

I created a sidebar for a Google Document that takes in user input. I'd like to use the collected data to update some fields on my document, but for now, I am just trying to display the data collected on screen via an alert to test if my code is working. Unfortunately, I am stuck and not sure what I am doing wrong.
There are two problems I am running into, but due to my limited knowledge of app script and coding as a whole, I just can't seem to resolve my issue. The problems I am having are, 1) my eventListener may not be be firing and 2) I can't seem to access the data collected from the input boxes.
Could someone assist me with this problem? I've been searching through the forum for an answer for a few days now, but again, my knowledge is very limited so it's possible I've come across the answer a few times, but just don't understand it. The code I am using is below and a link to my document is here.
App Script Code:
function onOpen() {
// Add a custom menu to the document.
var ui = DocumentApp.getUi(); // Or SpreadsheetApp or SlidesApp or FormApp.
ui.createMenu('Menu')
.addItem('Sidebar', 'showSidebar')
.addToUi();
}
function showSidebar() {
// Create HTML template from a file
var html = HtmlService.createHtmlOutputFromFile('userform')
.setTitle("TEST FORM")
.setWidth(300);
DocumentApp.getUi()
.showSidebar(html);
}
function appendData(data) {
DocumentApp.getUi().alert(data.f + ' ' + data.l);
}
HTML code
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div class="container">
<div>
<input id="firstName" type="text" name="firstName" placeholder="Enter first name">
</div>
<div>
<input id="lastName" type="text" name="lastName" placeholder="Enter last name">
</div>
<div>
<input type="button" value="SUBMIT" onClick="submitData();"/>
</div>
</div> <!-- End of container div -->
<script>
function submitData() {
var fName = document.getElementById('firstName').value;
var lName = document.getElementById('lastName').value;
var data {
f: fName,
l: lName
};
google.script.run.appendData(data);
}
</script>
</body>
</html>
Try this:
function submitData() {
var first=document.getElementById('firstname').value;
var last=document.getElementById('lastname').value;
var data={f:first,l:last};
google.script.run.appendData(data);
}
for simplicity you could also change this <button id="btn">Submit</button>
to this <input type="button" value="Submit" onClick="submitData();" />

I'm unsure as to why my onclick button doesn't link up with what I type into my textbox?

So I am fairly new to Javascript, and I am working on some code that converts decimal numbers to binary numbers. However when I run this program, I can't seem to get the output I am looking for. The best I have done was get my function to output an exact number already inside of the function, when I am instead trying to get an output that is generated from any number typed into the textbox? I'm not entirely sure where I am going wrong with this. I feel like there is something I am clearly missing, but I can't seem to grasp exactly what it is. I've been using codecademy and w3schools to gain more knowledge of JavaScript, but if anyone has any other resources that helped them when they first started programming that would be great!
<!DOCTYPE html>
<html>
<body>
<p>Convert from Decimal to Binary:</p>
<form method = "post">
<p id = "demo">
<label for="decNum"></label>
<input name="decNum" type="text">
<button onclick="toBinary()">Enter</button>
</p>
</form>
<script>
function toBinary() {
document.getElementById("demo").innerHTML =
parseInt(num,10).toString(2);
}
</script>
</body>
</html>
It's because num doesn't have a value.
Try this:
<p>Convert from Decimal to Binary:</p>
<form method = "post">
<p id = "demo">
<label for="decNum"></label>
<input name="decNum" type="text" id="decNum">
<button onclick="toBinary()">Enter</button>
</p>
</form>
<script>
function toBinary() {
var num = document.getElementById("decNum").value;
document.getElementById("demo").innerHTML =
parseInt(num, 10).toString(2);
}
</script>
There are a few things I would change. First off, I would keep non form elements outside of the form. The major issue is that num doesn't have a value, but to ensure it works you will also want to take the event and use event.preventDefault() to make sure it doesn't submit the form. Try:
<!DOCTYPE html>
<html>
<body>
<p>Convert from Decimal to Binary:</p>
<form method="post">
<label for="decNum"></label>
<input id="field" name="decNum" type="text">
<button onclick="toBinary(event)">Enter</button>
</form>
<p id="demo"></p>
<script>
function toBinary(event) {
event.preventDefault();
var value = document.getElementById('field').value;
document.getElementById("demo").innerHTML =
parseInt(Number(value), 10).toString(2);
}
</script>
</body>
</html>
You're not defining num.
Grab it from the input as such:
function toBinary() {
const num = document.getElementById("textInput").value;
document.getElementById("demo").innerHTML = parseInt(Number(num),10).toString(2);
}
<p id = "demo"></p>
<label for="decNum"></label>
<input name="decNum" type="text" id="textInput">
<button onclick="toBinary()">Enter</button>

NaN, when running BMI calculator

What am i doing wrong? According to the textbook example this is supposed to be sufficient code, but I get NaN when running it in a browser.
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8"/>
<html>
<head>
<title>test</title>
</head>
<body>
<p>Vekt: <input type="text" id="txtVekt" /></p>
<p>Hoyde: <input type="text" id="txtHoyde" /></p>
<button id="btnBeregn">Beregn</button>
<p id="resultat"></p>
<script>
window.onload = beregn();
function beregn(){
var hoyde = document.getElementById("txtHoyde").value;
var vekt = document.getElementById("txtVekt").value;
var bmi = vekt / (hoyde * vekt);
document.getElementById("resultat").innerHTML = "Din BMI er: " + bmi;
}
</script>
</body>
</html>
Your values are not initialized when you first run the function
There's really no need to run the function onload, especially
since your values aren't initialized. Note that my code removes the onload invocation.
You can just run the calculation when the button is clicked. You might also want to add some validation before you run the function, but I'll leave that exercise to you.
<body>
<p>Vekt: <input type="text" id="txtVekt" /></p>
<p>Hoyde: <input type="text" id="txtHoyde" /></p>
<button id="btnBeregn" onclick="beregn();" >Beregn</button>
<p id="resultat"></p>
<script>
function beregn(){
var hoyde = document.getElementById("txtHoyde").value;
var vekt = document.getElementById("txtVekt").value;
//this assumes your inputs are valid numbers...
var bmi = vekt / (hoyde * vekt);
document.getElementById("resultat").innerHTML = "Din BMI er: " + bmi;
}
</script>
</body>
hoyde and vekt do not have any value when the page loads since the inputs are empty, so there is no reason why bmi should give you anything other than NaN.
You need to either give those inputs a default value (probably 1 to begin) and then rerun the begregn function whenever the button is clicked:
<p>Vekt: <input type="text" id="txtVekt" value=1/></p>
<p>Hoyde: <input type="text" id="txtHoyde" value=1/></p>
<button id="btnBeregn" onclick="begregn()">Beregn</button>
Or just don't run begregn on window load, but only when the button is clicked
window.onload runs... on window load. :)
Change window.onload = beregn(); to:
var btn = document.getElementById("btnBeregn");
btn.addEventListener("click", beregn);

Populating Textbox on website using javascript

I am working on a project that i would need to populate textbox's inside of BMC Web Remedy with information with JavaScript/HTA File. -- Essentially I just need to Push text into textbox's on the site
I can't seem to figure out how to populate the information onto the page itself though, was wondering if I could get some guidance of if this is possible/how i would go about doing this, or just pointed in the right direction.
Just to clarify as an example on the web site:
http://www.brivers.com/resume/scripts/tutorial-hta-textbox.php
Having data push into the name/address/city field
Something like this only I'm not sure how to push it to the website field itself
**sorry just to clarify the field I am wanting to push this to is external of the application, is there a way to push this to a text field on (literally any) website? for example a username/password textbox on any site
<script language="javascript" type="text/javascript">
function PushData_NSO(){
var userinput = txtPhoneNum.value;
document.getElementById('txtName').value = userinput;
}
</script>
<body>
<p> <input id="txtPhoneNum" type="text" value=""> </p>
<p> <input type="button" onclick="PushData_NSO()"> </p>
</body>
You're trying to do getElementById('txtName') where the html is <input id="txtPhoneNum" />. This will never work because the id isn't the same as the one you're trying to access.
For errors like this, you could use the developer tools (Chrome, IE, Firefox shortcut F12) to see if there are errors in the console.
Furthermore the variable txtPhoneNum isn't defined. If you'd want it to be the input-element you should first do txtPhoneNum = document.getElementById('txtPhoneNum').
I've created a plunker to illustrate.
Get the data from HTML like this,
var userinput = document.getElementById('txtPhoneNum').value;
// do something with userinput
To display data in HTML you should use,
document.getElementById("whateverID").innerHTML = "changed user input";
try this:
<script type="text/javascript">
function PushData_NSO(){
var userinput = document.getElementById('txtPhoneNum').value;
document.getElementById('txtName').value = userinput;
}
</script>
<body>
<p> <input id="txtPhoneNum" type="text" value=""> </p>
<input type="text" id="txtName" value="" />
<input type="button" onclick="PushData_NSO()" value="push "/>
</body>
When you use getElementById('ValueOfID'), the javascript searches all the elements in the html where the id attribute is the same value as "ValueOfID" (in this case).
The .value after getElementById means you are going to do something with that value, in this case you change it to whatever is in the "userinput" variable.
So in your case you need to do:
<script language="javascript" type="text/javascript">
function PushData_NSO(){
var userinput = txtPhoneNum.value;
document.getElementById('txtPhoneNum').value = userinput;
}
</script>
Please try this:
<script language="javascript" type="text/javascript">
function PushData_NSO(){
//First get the value or text, for an instance, just say "sampleText".
var userinput = document.getElementById('txtPhoneNum').value;
//Secondly get the id of the textbox and using that append the value to that textbox.
document.getElementById('txtName').value = userinput;
}
</script>
I think this is what your after
<form>
<input id="txtPhoneNum" type="text" value=""/>
<input type="button" onclick="PushData_NSO()" value="Add Number to Div"/>
</form>
<br/>
<div id="txt">The number will replace this text</div>
<script>
function PushData_NSO(){
var userinput = document.getElementById('txtPhoneNum').value
document.getElementById('txt').innerHTML = userinput;
}
</script>
Here is a JSFIDDLE showing it in action, if you have any questions about this feel free to ask

Categories

Resources