I'm using javascript integration to submit a form that will call the factorial function in my javascript. I use the scripts and style plugin to integrate the javascript code. But it ends with an error at var n in the script.
Cannot read property 'value' of null at HTMLInputElement.factorial
Below is the code.
In my post I put:
<form id="cal_factorial">
Enter No:<input type="number" id="num" name="number"/><br/>
<input type="button" value="factorial" id="factorialize"/>
</form>
<p id="answer"></p>
In the head I have the script as:
document.addEventListener("DOMContentLoaded", function(){
document.querySelector("#factorialize").onclick = factorial;
});
function factorial(){
var n=document.getElementById("#num").value;
var ans =1;
if(n>1){
var trail = n*(n-1)
ans = ans *trail;
n-=1;
}
document.querySelector("#answer").innerHTML = ans;
}
Anything wrong with the definition?
document.getElementById("#num").value;
is incorrect.
it should be
document.getElementById("num").value;
without the #
Remove the hashtag in getElementById,
var n=document.getElementById("num").value;
There might be something wrong with scope, the code look ok
have a look here
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onsubmit
Related
I am currently working on a project that I took over with the input reads from a barcode, currently iam having trouble with my output giving me a fix value which the code reads from and does not read from the actual input.
below is the html code for the scanner. it reads fine
<div class="section" id="instruction-3">
<p>Otherwise, scan your code at the bottom, or manually type it in here:</p>
<span>
<input type="text" id="IC-input" name="IC" onclick="openKeyboard()" onkeyup="autofill(this.value)" placeholder="Enter your IC Number" required maxlength="9">
<label><button type="button" id="theButton" onclick="theButtonIsPressed()">Submit</button></label>
</span>
</div>
follow by the javascript (which i suspect is where the problem lies but am not sure)
<script>
var NRIC = '{"NRIC":"0"}';
function theButtonIsPressed(){
closeKeyboard();
console.log('button clicked');
NRIC = '{"NRIC":"123456789"}';
//var IcNum = document.getElementById("IC-input").value;
//NRIC = NRIC.replace("0", IcNum);
document.getElementById("IC-input").value = "";
doWork(NRIC)
}
</script>
function doWork(NRIC) {
// ajax the JSON to the server
$.post("receiver", NRIC, function(){
});
// stop link reloading the page
function update() {
setInterval(function(){$.post("receiver", '{"NRIC":NRIC}', function(){});}, 900);
It keeps giving me the value inside NRIC = '{"NRIC":"123456789"}'; which is 123456789, i realize this might be a simple fix but i am still learning and am unsure.
thank you in advance.
If I correctly understanded you want to have in the obj the input value, so try this:
function theButtonIsPressed(){
closeKeyboard();
console.log('button clicked');
var IcNum = document.getElementById("IC-input").value;
NRIC.NRIC = IcNum;
doWork(NRIC)
}
Why quotes around an object?
var NRIC = {"NRIC": 0};
function theButtonIsPressed() {
NRIC = {"NRIC": 123456789};
doWork(NRIC)
}
all but I have solved the problem, it was my fault that I did not mention I wanted to transfer the data to another webpage, and the problem with that was that the data was not transferred over to the other html.
function autofill(value){
console.log("Autofill:"+value)
//console.log(9 digits);
button = document.getElementById("theButton");
if(value.length == 9){
console.log('form is ready to submit');
theButtonIsPressed(value);
}
}
function theButtonIsPressed(value){
closeKeyboard();
console.log('button clicked');
//NRIC = '{"NRIC":"123456789"}';
console.log(value)
doWork(value)
}
by doing this it read the value as accordingly from the input and worked after, sorry again for my confusing question and thanks to everyone who tried to help.
I have some text inputs on my site for phone numbers. I want to keep all numbers in one format not some like 123-456-7890 and others 1234567890. I've tried writing a code to change this but it is giving me an error of Uncaught ReferenceError: changePhone is not defined.
Here is my code:
<input type="text" id="phone" onblur="changePhone(this.id)">
function changePhone(id){
$(id).text(function(i, number) {
number = number.replace(/(\d{3})(\d{3})(\d{4})/, "$1-$2-$3");
return number;
});
}
When running validation my code checks out as valid so I am not understanding why it doesn't work.
On a side note: Is there a PHP solution to achieve this or is jquery my best option?
EDIT: Here is a fiddle of my code: http://jsfiddle.net/4uk9hhtc/
There are so many things wrong with this.
$(id) does not work because you need a # before ID. You are doing $('whateverID') should be $('#whateverID')
The .text()does not work because you are running on an input element.
Your fiddle is missing jquery, and the code should in <head>
http://jsfiddle.net/4uk9hhtc/13
function changePhone(id){
var number = $("#"+id).val().replace(/(\d{3})(\d{3})(\d{4})/, "$1-$2-$3");
alert( number )
}
OR you could just use jquery and get rid of inline onclick like in the other answers
Here is something that actually works
$(function() {
$('#phone').on('blur', function(){
var val = ""+this.value;
this.value = val.replace(/(\d{3})(\d{3})(\d{4})/, "$1-$2-$3");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="phone" />
Pure JS with inline invocation
function changePhone(field) {
var val = ""+field.value;
field.value = val.replace(/(\d{3})(\d{3})(\d{4})/, "$1-$2-$3");
}
<input type="text" id="phone" onblur="changePhone(this)"/>
Pure jQuery solution. Your fiddle isn't including jQuery by the way. I'm making assumptions that you know how to include jQuery correctly. You should be using val().
http://jsfiddle.net/2kLywwpu/1/
<input type="text" class="phone" id="theText">
using
var textbox = $('#theText').on('blur', function(){
textbox.val(function(i, number) {
number = number.replace(/(\d{3})(\d{3})(\d{4})/, "$1-$2-$3");
return number;
});
});
Here's a fiddle that's not using your regular expression so you can see that the basic functionality works.
http://jsfiddle.net/2kLywwpu/2/
I'm trying to simply have a button update the contents of ah HTML textbox (on the client side).
Clicking the button fires the updateBox() method fine. Stepping through the code, I can see the text1.value field update fine but the text1 does not seem to get updated by changes to the dom.
Am I mistaken to think that you can do updates on the client side only by modifying dom data?
<input type=text name="text1" value="100"/>
<button name="but1" id="but1" onclick="updateBox" >clickme!</button>
<script type="text/javascript" >
var text1 = document.getElementsByName('text1');
function updateBox() {
//text1.value = "22"; <----tried this way, no good either :(
text1.innerHTML = "99";
}
</script>
Few things:
onclick="updateBox" should be onclick="updateBox()"
var text1 = document.getElementsByName('text1'); should be var text1 = document.getElementsByName('text1')[0]; (note the [0])
text1.value = "22"; is the one to use
jsFiddle example
Try use below,
var text1 = document.getElementsByName('text1')[0];
function updateBox() {
text1.value= "99";
}
Ref: https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByName
Thanks for everyone's responses.
With your advice I got the button to update. I appreciate the advice on how to implement the function correctly. This was just a test so I didn't pay much attention.
1) I had to use: onclick="updateBox" rather than "updateBox() in the button HTML because "updateBox" caused the event to fire with out clicking the button.
2) Big thanks for pointing out that I was referencing a collection instead of an item in the collection. Had to use: var tb1 = document.getElementsByName('tb1')[0];
3) For some reason the box would not update when I used:tb1.innerHTML = "99";
This worked: tb1.value = "99";
text1[0].innerHTML = "99"
Use innerHTML instead of value
try passing the variable to your function instead of declaring it outside of your function.
<input type=text name="text1" value="100"/>
<button name="but1" id="but1" onclick="updateBox('text1',99)" >clickme!</button>
<script type="text/javascript" >
function updateBox(t,v) {
var tv = document.getElementsByName(t)[0];
tv.value = v;
}
</script>
i m trying to do a validation using jquery.
Enter Account no:
here is my html code
<input type="text" name="Assets" id="Assets" size="25" /><br />
<div id="eb"> Please Enter Valid Account no </div>
Enter Amount<input type="text" name="Liability" id="Liability" size="25" /><br />
and here is my jquery code
$(document).ready(function(){
$("#Assets").change(function(){
var Assets = $('input#Assets').val();
var expression=/[0-9]{4}\s[0-9]{4}\s[0-9]{2}\s[0-9]{10}/;
if (Assets == "" || Assets == " ") {
$('#eb').show();
}
else if(Assets.test(expression)){
$('#eb').hide();
}
$('#eb').toggle();
}
i want to display a mesage when user write a account no then at a time he can see the message that Please Enter Valid Account no and if he insert correct then that message can be hide.
here is my jsfiddle - http://jsfiddle.net/BzdfN/5/
please help
Try this code:
$(document).ready(function () {
$("#Assets").change(function () {
var Assets = this.value;
var expression = /[0-9]{4}\s[0-9]{4}\s[0-9]{2}\s[0-9]{10}/;
if (Assets.match(expression)) {
$('#eb').hide();
} else {
$('#eb').show();
}
});
});
This is a suggestion for more simple code. Notice I used match() which takes a regex as paramenter, if you want to use test() you should use the value/string as paramenter and use like expression.test(Assets).
Fiddle
About your code/fiddle:
you missed adding jQuery library to the fiddle
you missed ) closing the change() function
you missed }) closing the ready() function
you used test() with wrong order, check my text above about match() and test()
your fiddle with corrections: Fiddle
jQuery was not included and multiple syntax errors
$(document).ready(function () {
var expression = /[0-9]{4}\s[0-9]{4}\s[0-9]{2}\s[0-9]{10}/;
$("#Assets").change(function () {
$('#eb').toggle(!expression.test(this.value));
})
})//missing brackets
Demo: Fiddle
Try this - http://jsfiddle.net/dangoodspeed/BzdfN/9/ I made a bunch of changes, including activating jQuery, closing some functions, and reversed Assets and expression for the .test call
else if(expression.test(Assets)){
I have code on my website that isn't working, and I haven't been able to figure out why...
Here is the code:
if (self.location.href == top.location.href) {
document.fastform.submit();
document.getElementById(fastform).submit();
}
Now if I put something other than a form submit into the if statement, it works just fine. It's just when I do the form submit code it never works...
Here is the form code:
<form id="fastform" name="fastform" ACTION="/amember.php">
<INPUT TYPE="text" NAME="myurl" ID="myurl">
<input type="submit" />
</form>
Thanks for the help guys!
So far none of the suggestions work, I have tried several different variations like putting quotes around the fastform in getelementbyid. Here is my entire javascript program:
<script type="text/javascript">
function geturl() {
var locate = document.location
document.fastform.myurl.value = locate
}
window.onload = geturl;
if (self.location.href == top.location.href) {
var f=document.forms.fastform; f.submit();
}
</script>
Thanks for the suggestions!
Okay, so using some of the suggested code here I got it working. The problem was the if statement was not being executed at the right time, I moved things around so that the if statement was executed LAST and everything started working. Here is the complete (functioning) code:
<script type="text/javascript">
function geturl() {
var locate = document.location
document.fastform.myurl.value = locate
getmeoutofhere()
}
window.onload = geturl;
function getmeoutofhere() {
if (self.location.href == top.location.href) {
document.getElementById('fastform').submit();
}
}
</script>
<form id="fastform" name="fastform" ACTION="/amember.php" style="visibility:hidden;">
<INPUT TYPE="text" NAME="myurl" ID="myurl" />
<input type="submit" />
</form>
You can use this in your function:
var f=document.forms.fastform;
f.submit();
and it's working completely fine
document.getElementById('fastform').submit();
OR
var frm = document.getElementById('fastform');
frm.submit();
I'm not sure if it's the problem, but there's certainly one problem with the line:
document.getElementById(fastform).submit();
The problem, I think, is that you're trying to get an element by its id, but getElementById() requires a quoted string, unless you've already assigned the string to the variable represented by fastform. Therefore it should be either:
document.getElementById('fastform').submit();
or:
var fastform = 'fastform';
document.getElementById(fastform).submit();
Further, you seem to be trying to work with the fastform variable before it seems to have been set, in the first line contained within the if statement:
document.fastform.submit();
I'd suggest amending your script a little, to be something like:
if (self.location.href == top.location.href) {
var fastform = document.getElementById('fastform');
fastform.submit();
}
References:
document.getElementById().