javascript beginner- unable to show message box on screen - javascript

I am simply trying to show a message box on screen.
This is the HTML for the button that invokes the message box---
<button onclick="myFunction()">Try it</button>
This is the relevant javascript function code--
function myFunction()
{
alert("Hello World!");
}
The javascript function is stored at js/fetchdetails.js (path relative to the HTML file).
I have included the JS file in the HTML file using the following code in the head section--
<script src="js/fetchdetails.js"></script>
What am I doing wrong here?

There's nothing wrong in the code you've posted; the error is somewhere else.
Either your fetchdetails.js is not being loaded, or some error in javascript not shown here causes your script to stop executing.
Use your browser's inspection tool to look for any error messages, and to verify that the file has loaded correctly (there's usually a "Net" tab for that).

Try this..
<!DOCTYPE html>
<html>
<head>
<title>Page Name</title>
<script type="text/javascript" src="js/fetchdetails.js"> </script>
</head>
<body>
<button onclick="myFunction();">Try it</button>
</body>
</html>
In your javascript file
function myFunction(){alert("Hello World!");}
This works perfect for me
If it doesnt work please provide more details or else try these buttons:
<button onclick="javascript:myFunction();">Try it</button>
<input type="button" onclick="myFunction();" value="Try me"/>
<input type="button" onclick="javascript:myFunction();" value="Try Me"/>
Hope this helps

Related

How can we call a function in a .js from a .html file

In my index.html file I have:
<button onclick="myFunction()">Click me</button>
myFunction is located in index.js
how can I call this function when the button is clicked?
You need to add the index.js file at the bottom of your HTML, right before the </body> tag:
<script src="path/to/index.js"></script>
Add to header:
<script type="text/javascript" src="index.js"></script>
Add the js file reference in your html page so its functions can be called from html page.
<script src="yourfile.js"></script>
Also give your button type="button" otherwise this button will submit the page and your function will not be called.
<button type="button" onclick="myFunction()">Click me</button>
I'm guessing you're new to this all, so I'm going to try and explain it a little bit more than the answers above.
When you got your HTML:
<html>
<head>
<title>This is the title of my page</title>
<script src='js/script.js' type='text/javascript'></script>
</head>
<body>
<button onclick="myFunction()">Click me</button>
</body>
</html>
When you see this. The <script> tag says to the browser: "Okay, there is coming up some javascript (or jQuery)" so it will look in the src attribute, to see where the javascript is found that should be loaded. When it finds it, it will load it into the html document and you will have the functions in the file ready to be used in your html document. The type attribute just says: "Okay, this script is filled with javascript". You also have type='text/css' for example when you're including a CSS script to style the HTML elements of the page.
Hope it makes sence, and I wish you luck, learning html/css/javascript. If you have any questions, reply to this answer.

simple javascript example not working

I am learning javascript and i can't manage to make this work, an alert message should appear when i click the submit button
Html
<html>
<head>
<title>Understanding the Document Object Model</title>
<script type="javascript" src="script.js"></script>
</head>
<body>
<h1 id="title">Understanding the Document Object Model</h1>
<p id="first">This is the first paragraph</p>
<p id="second"><strong>This is the second paragraph</strong></p>
<p id="third">Third paragraph</p>
<input type="submit" id="clickMe" value="Click Me"/>
</body>
</html>
Javascript script.js
window.onload=function(){
document.getElementById("clickMe").onclick=runTheExample;
}
function runTheExample(){
alert("running the example");
}
Your type attribute is wrong.
It should be "text/javascript"
It works fine for me after making that change
==================================
EDIT:
As a note, my debugging process was to try invoking the alert() directly in the script. script.js became:
alert("running the example");
window.onload=function(){
document.getElementById("clickMe").onclick=runTheExample;
}
function runTheExample(){
alert("running the example");
}
That was triggering the alert either, which says that the whole script isn't in play. So it must be the invocation of the script that's the problem.
Once you've determined that, there aren't many things left to check.
<script type="text/javascript" src="script.js"></script>
You change your external javascript file link like this. Because,type attribute of script tag should come as text/javascript

Javascript on Google Sites

I am a bit new to the coding. I tried to put javascript on my google site in an HTML box but it is not working. I am pasting my code here.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to display an alert box:</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
alert("I am an alert box!");
}
</script>
</body>
</html>
It should validate with the alert box. The code is running fine when I am running it on the localhost but is not working when I am pasting it in the HTML box within a google site. my company is using Google gadget to make the HTML and javascript run over the google site. Is there any simpler way to do without google gadget?
You can program a div with a method to act like the alert method. Stylize and position it however you want, but here is an example of one I called msgBox that takes a message and a type (just changes the color for critical, warning, and info) and shows up like a banner at the top of the document:
<!DOCTYPE html>
<html>
<head>
<style>
.msgBox{position:absolute;width:50%;top:0px;left:-25%;margin-left:50%;padding:1%;color:black;display:none;font-family:"Calibri","Arial",sans-serif;vertical-align:middle;}
.info{background-color:rgba(120,170,250,0.95);}
.warn{background-color:rgba(240,230,120,0.95);}
.crit{background-color:rgba(250,120,120,0.95);}
.msgBoxMessage{width:98%;max-width:98%;height:100%;color:black;font-size:1.8vw;vertical-align:middle;}
.msgBoxClose{height:100%;color:black;font-weight:bold;font-size:3vw;cursor:pointer;transition:0.2s;vertical-align:middle;}
.msgBoxClose:hover{color:white;transition:0.2s;}
</style>
<script>
function msgBox(message, type) {
var msgBox = document.getElementById("msgBox");
var msgBoxMessage = document.getElementById("msgBoxMessage");
msgBoxMessage.innerHTML = message;
msgBox.style.display="block";
msgBox.className="msgBox " + type.toLowerCase();
}
</script>
</head>
<body>
<h2>This page shows how to drive messages without using javascript alert.</h2>
<div class="msgBox info" id="msgBox">
<table style="width:100%;">
<tr>
<td class="msgBoxMessage" id="msgBoxMessage"></td>
<td class="msgBoxClose" onclick="document.getElementById('msgBox').style.display='none';">×</td>
</tr>
</table>
</div>
<button onclick="msgBox('This is for your <u>information</u>.', 'info');">Info</button>
<button onclick="msgBox('This is just a <i>warning</i>.', 'warn');">Warn</button>
<button onclick="msgBox('This is a <b>critical</b> message!', 'crit');">Crit</button>
</body>
</html>
Perhaps you shouldn't be pasting the <html> and <body> tags in the widget box, as it is already part of a html document.
Simply try this instead:
<button onclick="alert('I am an alert box!');">Try it</button>

How do I add text to a paragraph tag via JQuery?

I'm trying to write my first chrome extension to test my acquired knowledge from codecademy (HTML/CSS, JQUERY and Javascript). First of all I'm trying to append text to a paragraph tag via the onclick of a button.
heres my code:
<!doctype html>
<html>
<head>
<title>Facebook event graph</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
<script src="popup.js"> </script>
</head>
<body>
<form id="inputUrl">
Enter a URL: <input type="text" name="url" id="url">
<button type="button" onclick="getFacebookData()"> Get Data </button>
</form>
<canvas id="graph" width="300" height="100">
</canvas>
<p id="text" width="300" height="100">1</p>
</body>
</html>
and my popup.js:
$(document).ready(function(){
//Variables
function getFacebookData() {
$('p').append('Test');
};
});
it's probably something very basic that I'm doing wrong, but a push in the right direction would be really appreciated :)
You are not allowed to use inline scripting like onclick="getFacebookData()"
You have to remove the handler from html:
<button type="button" id="my-button"> Get Data </button>
And you have to move the handler into popup.js:
$(document).ready(function(){
$('#my-button').click(getFacebookData);
});
You are also, by default, not allowed to load jQuery from an external CDN - and certainly not http one, again for Content Security Policy reasons. And you shouldn't! Put jQuery in your extension's folder and load it locally.
Matter of taste, but I would place getFacebookData() definition outside $(document).ready, so it's available in the global scope. Also, the semicolon after it is not needed.
Last, but not least: for future debugging, inspect the console of the corresponding page of your extension. For things like background/options page you should be able to access them from Developer Mode extensions list. For a popup, you should right-click the button of your extension and select "Inspect Popup".

I thought I defined my jQuery function, but I keep getting an "is not defined" error. Why is this?

My HTML file:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" />
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<form name="someForm">
<input type="button" value="Click me" onClick="myFunction()" />
</form>
<div id="result"></div>
</body>
</html>
My script.js file:
function myFunction(){
$("#result").html("BUTTON WORKS");
}
I have Firebug, and whenever I click the button, Firebug throws me this error:
ReferenceError: myFunction is not defined
What am I doing wrong?
script can't be a self closing tag in HTML (it works on some browsers, depending on the doctype, but it's not correct). You must add a closing tag.
Replace
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" />
with
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
The script element pointing to your script probably isn't parsed correctly due to this error.
From the norm :
A script element must have both a start tag and an end tag.
Blockquote
Might be due to file reference issue.
It is a better practice to attach the event in the js file instead of HTML.
<form name="someForm">
<input type="button" id="btn" value="Click me" />
</form>
$('#btn').on('click', function(){
$("#result").html("BUTTON WORKS");
});
Do you open that file locally (you have file:// in address bar) or from some server (http:// protocol in address bar)? Because if you open file locally, you actually try to load jquery from address:
file://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
which is incorrect. It happens, because you use //ajax.googleapis.com/... as adress, which refers the same protocol as currently opened page.
Either change it to:
http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
of upload your file to some server (or even install one locally) and test it through full http request.
I solved the problem by combining answers from #Susbanth, #MBO, and #dystroy.
Here's my new HTML file:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<form name="someForm">
<input type="button" value="Click me" />
</form>
<div id="result"></div>
</body>
</html>
I added "http" to the jQuery source, closed the tag, and removed the 'onClick' from inside the HTML.
Here's the updated script.js file:
$(document).ready(function(){
$("input[type=button]").on("click",function(){
$("div#result").html("BUTTON WORK");
});
});
I made the onClick event a jQuery event.

Categories

Resources