Error: Uncaught ReferenceError: myFunction is not defined
This is my .js file which isn't working or calling on my HTML
function = myFunction()
{
var ret = "";
for (var i = 15; i < 26; i++)
{
ret += i + " " + i*2 + " " + i*3 + "\n";
}
alert(ret);
}
This is my HTML code:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="Test1.js"></script>
</head>
<body>
<h1> Exercise 4 - LAB 4 </h1>
<h2> Exercise 2.1 </h2>
<button type="button" onclick= "myFunction() "> Press Me </button>
</body>
</html>
Error: Uncaught ReferenceError: myFunction is not defined
Here you go:
var myFunction = function ()
{
var ret = "";
for (var i = 15; i < 26; i++)
{
ret += i + " " + i*2 + " " + i*3 + "\n";
}
alert(ret);
};
function = varName () {} is a syntax error. You can do it like this: function varName () {} without the equals sign, or you can do it the way I did it.
After a little bit of healthy admonishment from some of our fellow posters, I should point out that there is a difference between these two ways to write a function. To quote RobG: "There is no practical difference between function foo(){} and var foo = function(){}; other than when the function is created and that the first is called a FunctionDeclaration and the second a FunctionExpression." A function declaration is loaded before any code is executed, so you can can call it anywhere (before or after the function's location in the file). However, again in terms of actual location in the file, if you call a function expression before its location in the file, an error will be thrown. (You can however get around this by declaring the variable that will later be assigned to the function expression at the beginning of the file.)
function = myFunction() { /* body */ }
is invalid syntax. Didn't you get an error in the console from this? The correct syntax is either
function myFunction() { /* body */ }
or
myFunction = function() { /* body */ }
You can also write:
somename = function myFunction() { /* body */ };
However, in this case the scope of the name myFunction is just the body, it's not global.
The declaration of the function is wrong:
Javascript:
function myFunction() {
var ret = "";
for (var i=15; i<26; i++) {
ret += i + " " + (i*2) + " " + (i*3) + "\n";
}
alert(ret);
}
HTML
<html>
<head>
<script type="text/javascript" src="Test1.js"></script>
</head>
<body>
<h1>Exercise 4 - LAB 4</h1>
<h2>Exercise 2.1</h2>
<input type="button" value="Press Me" onclick="myFunction()" />
</body>
</html>
Related
I'm very new to JavaScript so I apologize if this question has an extremely obvious answer. What I'm trying to do is pass the name of a text box in HTML to a function in Javascript via an onclick button. The goal of the function is to test a given string and highlight it based on certain parameters (for my testing, it is simply length).
There are multiple weird odds and ends within the functions that I'm aware of and working on, I know the functions work as when I remove the parameters and call the code text box directly, it prints exactly what I expect it to. But I want to be able to pass multiple text boxes without needing a specific function per box.
The code I have is as follows. I've included all of it in case the mistake was made somewhere I didn't expect it to be.
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<label for="wordOne">Word One</label><br>
<input type="text" id="wordOne" name="wordOne"><br>
// Pass the value for the wordOne textbox to verify function
<button type="button" onclick="verify(wordOne,this)">Check</button><br><br>
<label for="wordTwo">Word Two</label><br>
<input type="text" id="wordTwo" name="wordTwo"><br>
// Pass the value for the wordTwo textbox to verify function
<button type="button" onclick="verify(wordTwo,this)">Check</button><br><br>
<p id="test"></p><br>
<p id="error"></p>
<script>
// Highlights any code in a given line.
function highlight(text,id,begin,end) {
// document.getElementById("error").innerHTML = "TEST";
var inputText = document.getElementById(id);
var innerHTML = inputText.innerHTML;
var index = innerHTML.indexOf(text)+begin;
if (index >= 0) {
innerHTML = innerHTML.substring(0,index) + "<span class='highlight'>" + innerHTML.substring(index,index+text.length) + "</span>" + innerHTML.substring(index + text.length-end);
inputText.innerHTML = innerHTML;
return string;
}
}
function verify(button,el){
var begin=1;
var end=1
var id="test";
var string = document.getElementById(button).value;
var len=string.length;
if(len>5)
{
document.getElementById(id).innerHTML = string +" "+len;
highlight(string,id,begin,end);
}
else
{
document.getElementById(id).innerHTML = string;
}
}
</script>
</body>
</html>
I apologize again if this is extremely obvious but I'm honestly not sure what I'm doing wrong. Thanks in advance for any help!
You can get the name of the textbox by the attribute
var x = document.getElementsByTagName("INPUT")[0].getAttribute("name");
And then use it in your function as
var x = document.getElementsByTagName("INPUT")[0].getAttribute("name");
function highlight(x,id,begin,end) {
// document.getElementById("error").innerHTML = "TEST";
var inputText = document.getElementById(id);
var innerHTML = inputText.innerHTML;
var index = innerHTML.indexOf(text)+begin;
if (index >= 0) {
innerHTML = innerHTML.substring(0,index) + "<span class='highlight'>" + innerHTML.substring(index,index+text.length) + "</span>" + innerHTML.substring(index + text.length-end);
inputText.innerHTML = innerHTML;
return string;
}
}
NOTE : By [0] it means the first one that is the first textbox.
I am a very new programmer that was challenged to make a bitcoin clicking game. I am about ten percent done and have spent hours trying to debug my site. I get this error. Uncaught ReferenceError: add is not defined
at HTMLAnchorElement.onclick It all worked perfectly fine until I added a upgrade function. After that it did not work. Not even deleted it made a difference.
<script>
function update() {
document.getElementById('text').value = bitcoincount;
document.title = bitcoincount + " Bitcoin";
document.getElementById('amountithree').innerHTML = "You Own " + ithree + " i3's";
}
var bitcoincount = 0;
var ithree = 0;
function timer() {
bitcoincount = bitcoincount + ithree;
update()
}
setInterval(timer, 1000)
</script>
<html>
<head><title>Bitcoin</title></head>
<body>
<img src="opengraph.png" height="200" width="200">
<br><br>
You got:
<input type="text" id="text" disabled style=text-align:center>
<script>
function add() {
bitcoincount = bitcoincount + 1
document.getElementById('text').value
bitcoincount;
document.title = bitcoincount + " Bitcoin";
}
</script>
Bitcoin.
<br><br>
<button>Save</button>
<button>Load</button>
<br><br>
<p>Buy 1 i3 6100</p>
<button><img src=ithree.jpg width="100" height="100"></button>
<p id="costithree"> Bitcoin</p>
<p id="amountithree">You Own 0 i3's</p>
<script>
function save() {
localStorage.setItem("bitcoincount", bitcoincount);
}
function load() {
bitcoincount = localStorage.getItem("bitcoincount");
bitcoincount = parseInt(bitcoincount);
update()
}
function buyithree() {
if (bitcoincount >= ((ithree + 1) ^ 12)) {
bitcoincount = bitcoincount - ((ithree + 1) ^ 12);
update()
}
}
</script>
</body>
</html>
I don't know if this will fix your problem, but I'd move the first <script...>...</script> block to be inside the <html>...</html> block, preferably inside <head>...</head>.
you have a typo in your add() function, that's why the browser can't recognize it
document.getElementById('text').value bitcoincount;
should be :
document.getElementById('text').value = bitcoincount;
Your function have error thats why its not created Please ckeck console for errors
Change this add assignment operator
document.getElementById('text').value = bitcoincount;
I'm trying to get answer to display when I press the Show Button but I can't get it to work. Could someone help me understand what I am doing wrong. I can get the first part to work where I generate a random integer. But the second part does not execute (JSFiddle).
<!DOCTYPE html>
<html>
<body>
<button class="button" onclick="disp()">Generate</button>
<button class="button" onclick="show_ans()">Show</button>
<script>
function disp() {
var i = Math.floor((Math.random() * 51) + 1);
var j = 2 * i;
document.getElementById("Goal").innerHTML = [i];
function show_ans() {
document.getElementById("answer").innerHTML = [j];
}
}
</script>
<p> Random Integer:
<span id="Goal"></span>
</p>
<p> Computed Answer:
<span id="answer"></span>
</p>
</body>
</html>
show_ans only exists within the scope of the disp function, so anything outside that scope (such as the rest of the page) can't invoke it.
Move it outside that function:
function disp() {
//...
}
function show_ans() {
//...
}
Of course, since show_ans also relies on j, that too will need to exist in a scope where both functions can access it:
var j;
function disp() {
var i = Math.floor((Math.random() * 51) + 1);
j = 2 * i;
document.getElementById("Goal").innerHTML = [i];
}
function show_ans() {
document.getElementById("answer").innerHTML = [j];
}
This is code I've written for a class assignment. The assignment reads as follows:
"Build a function that will start the program. Please call it main().
From the main() function, call a function called getValue().
The getValue() function will get a number from the user that will be used for the next step.
Also from the main() function, call a function called getSquareRoot().
The getSquareRoot() function will get the square root of the number that was received by the user in the getValue() function.
Make sure that you display the results, including the original number and the square root of the number, to the user in an easily readable statement.
Bolding is included in the original, by the way.
Here's my code and it works, except that somehow functions are being called twice, and results are being displayed twice, with the second iteration assigning userInput a value of 0. I can't seem to identify where the 'loop' is getting fired off (beginner here). Any help would be very much appreciated; I know I'n staring at it but it's totally eluding me.
<html lang="en">
<head>
<title>Project 3 Part A</title>
<meta charset="utf-8">
<script>
function main()
{
var msg1="";
var msg2="";
var userInput = "";
getValue(userInput);
getSquareRoot(userInput);
}
function getValue(userInput)
{
var userInput = document.getElementById("userNumber").value;
return getSquareRoot(userInput);
}
function getSquareRoot(userInput)
{
squareRoot = Math.sqrt(userInput);
var msg1 = "Your original number was " + userInput + ".";
var msg2 = "The square root of " + userInput + " is " + squareRoot + ".";
document.getElementById("original").innerHTML += msg1;
document.getElementById("results").innerHTML += msg2;
}
</script>
</head>
<body>
<br>
<input type="button" id="userInputButton" onclick="javascript:main();" value="Square root input value: "/>
<input type="text" id="userNumber">
</div>
<div id="original">
</div>
<div id="results">
</div>
</body>
enter code here
You need to remember that each function should optimally have 1 purpose only. The function 'getSquaredRoot' here is in charge of both calculating the root as well as outputting the result for the user to see.
Plus as Lucky Chingi said, you're calling getSquaredRoot twice.
function main()
{
var userInput = getValue();
var squaredRoot = getSquareRoot(userInput);
var msg1 = "Your original number was " + userInput + ".";
var msg2 = "The square root of " + userInput + " is " + squareRoot + ".";
document.getElementById("original").innerHTML += msg1;
document.getElementById("results").innerHTML += msg2;
}
function getValue()
{
return document.getElementById("userNumber").value;
}
function getSquareRoot(userInput)
{
return Math.sqrt(userInput);
}
Notice how it's logically seperated now.
Im reading the tutorials here.
I am getting confused trying to understand some of this example, why is the variable declared as nothing and what does the ,i indicate
var x="",i;
and also why do you use
x=x
at the beginning of the line?
<!DOCTYPE html>
<html>
<body>
<p>Click the button to loop from 1 to 6, to make HTML headings.</p>
<button onclick="myFunction()">Try it</button>
<div id="demo"></div>
<script>
function myFunction()
{
var x="",i;
for (i=1; i<=6; i++)
{
x=x + "<h" + i + ">Heading " + i + "</h" + i + ">";
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>
var x="",i;
This translates as
var x = "";
var i;
which simply declares those variables within the current scope.
x=x + ...
This means replace the value of x with the value of the expression to the right of the = sign. In this case, you are concatenating a string to the end of the current value of x.
var x="",i;
is the same as
var x = "";
var i;
Declare variables in the form of
var a=1,
b=2,
c=3;
is common and make the code style looking clear and easy to read.