Code on webpageThe button doesn't workSo, I am fairly new to JavaScript and have been looking at tutorials for the language. I downloaded the Atom IDE and began following a video and used the same code as the video to make a web page with a button that reveals a message when clicked. However when I click the button nothing happens, and when I hit inspect element.
It gives me the following error: Failed to load resource: net::ERR_FILE_NOT_FOUND
It appears as though the HTML file is not working with the .js file. However they are in the same directory.
Here's the updated code (still the same error):
<DOCTYPE! html>
<html>
<head>
</head>
<body>
<button onclick="revealMessage()">Click me!</button>
<p id="hiddenMessage" style="display:none">Filosofem</p>
</body>
<script>
function revealMessage() {
document.getElementById("hiddenMessage").style.display = 'block';
}
</script>
</html>
Perhaps, it is the file directory. When you declared <script src="js/script.js"></script>, that means that your script.js file, must be located in a subfolder called "js".
If you want your to be within your file, then you can do
<DOCTYPE! html>
<html>
<head>
</head>
<body>
<button onclick="revealMessage()">Click me!</button>
<p id="hiddenMessage" style="display:none">Filosofem</p>
</body>
<script>
function revealMessage() {
document.getElementById("hiddenMessage").style.display = 'block';
}
</script>
</html>
Finally, you should try resaving the code through atom, and make sure your code is the right version of your code.
By using an external stylesheet you need to make sure your CSS file is saved as said above but with <script scr="filename.js">/script> I still haven't found a way other than having your code internal which is completely fine unless you're making a world wide website then it would be easy to hack.
Related
I am trying to make a very simple thing work:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script src="js/test.js" type="text/js"></script>
<button onclick="test()" type="submit">Test</button>
</body>
</html>
With js/test.js being found by the browser and containing:
function test() {
alert("test");
}
When opening the page and clicking the button, nothing happens and I can see in the console:
Uncaught ReferenceError: test is not defined
at HTMLButtonElement.onclick (test:7)
I have tried to move the script import above or under the button, or in the header.
I have tried to use "window.setlocale = function" in my js file.
I have tried to put nothing in the test method.
I checked for errors with JSLint (there is no error).
When I check the source, I can see the js file and the browser opens it when I click on it.
The only way I can get the Javascript to work is to write it inline...
Maybe the issue is with my environment?
In order to run this, I use an Apache server, and it is configured to serve this on localhost:8077. I works fine so far.
I use Laravel 7.10, PHP 7.4... working fine. To run this I created a simple route, that shows the view (a simple index.blade.php) with the HTML content copy/pasted above. It displays fine on "http://localhost:8077/test", no problem.
I also tried to use the laravel notation
<script src="{{ asset('js/test.js') }}" type="text/js"></script>
but it gives the same result.
I also have the PHP debugbar (a Laravel plugin) active, and it does not show any error. The view is properly loaded and displayed.
Also, I use PHPStorm, and it does not detect any issue.
It's been 2 days and I cannot makes this seemingly extremely basic thing to work, please help me m(_ _)m
Your script type is wrong. Use application/javascript in your script element to make your javascript work - or better yet, remove the type attribute and let browsers auto-detect the type:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script src="js/test.js" type="application/javascript"></script>
<button onclick="test()" type="submit">Test</button>
</body>
</html>
Without type attribute:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script src="js/test.js"></script>
<button onclick="test()" type="submit">Test</button>
</body>
</html>
you can try to add script tag to header tag. like this
<head>
<script type="text/javascript" src="path/to/script.js"></script>
<!--other script and also external css included over here-->
</head>
Try removing the function name in js/test.js
function() {
alert("test");
}
Please add the js file as a reference in the header section of your core file. External referencing.
I have an html file and a js file. After loading the js file, trying to run any of the js methods doesn't work in chrome. They work fine in IE. In the chrome console it says that the function is not defined, but under the network tab you can see that the file is found and is loaded by the html.
I know that if I write the js inline it then works fine and using those functions work. Code below:
file stucture:
html
->index.html
js
->test.js
js: test.js
function myTest(){
alert("TEST")
}
html: index.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="../js/test.js"> </script>
</head>
<body>
<button onmousedown="myTest()">Move Up </button>
</body>
</html>
<button onmousedown="myTest()">Move Up </button>
Unfortunetly the onmousedown event is no longer supported by Chrome.
You can try to use the onclick event which is supported by (as I think) every browser:
<button onclick="myTest()">Move Up </button>
I've solved it. The problem was the encoding on the html document. You want to have UTF-8
//index.php
<head>
<script src="/js/test.js"></script>
<style></style>
</head>
<body>
<script>
callalert();
</script>
</body>
//test.js
function callalert() {
alert('Allertt');
}
eg: i change the fn completely to: callalert(msg) {
var msg;
alert(msg);
}
//and html to:
callalert('Hello!');
//and it wont change, it still says "Allertt"
Anything would be appreciated!
So recently i've tried to implement some javascript libraries to a webpage. But html wont call anything from other js files. I tried many things, calling simple functions from js files, and somtimes it works but when I delete the test, function the page will display the same result as the functions is still there. It will take a long time for it to respond to the changes of the js.
I even tried from diffrent devices.
Anything would be appreciated!
Edit: When i posted this i modified the function from 'Allertt' to 'Hello!'.
Now, that I checked after 5hrs the script is updated. Also, yes this is running online on a server.
I have prepared an example for you, which works perfectly:
HTML FILE
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<script>
myFun();
</script>
</body>
</html>
External JS
function myFun(){
alert('test');
}
This calls myFun from external file, on every refresh, like it should.
I faced this problem.The Condition needed is that the external file should not include script tag.But in order to call a function the script tag is needed.The code is a mere example.Also is there any other alternative to link the External JS file.
<!DOCTYPE html>
<html>
<body>
<script src="Friendship.js">
</script>
</body>
</html>
The code for the external JS is:
<!DOCTYPE html>
<head>
<script>
function mySpace()
{
document.getElementById("playa").innerHTML="Friendship is always a sweet responsibility, never an opportunity.
";
}
</script>
<body>
<h1><tt>Friendship</tt></h1>
<p id="playa">"One of the most beautiful qualities of true friendship is to understand and to be understood.
"</p>
<button type="button" onclick="mySpace()">Click Here !</button>
</body>
</html>
A Javascript file, should only contain JavaScript code. It should not contain HTML, CSS or any other markup.
Based on your example above, you should have the following two files:
index.html
<!DOCTYPE html>
<html>
<body>
<!-- Link to external JavaScript file -->
<script src="friendship.js"></script>
<h1><tt>Friendship</tt></h1>
<p id="playa">"One of the most beautiful qualities of true friendship is to understand and to be understood."</p>
<button type="button" onclick="mySpace()">Click Here !</button>
</body>
</html>
friendship.js
// This is a comment
function mySpace()
{
document.getElementById("playa").innerHTML="Friendship is always a sweet responsibility, never an opportunity.";
}
Notes
The friendship.js is pure JavaScript (or comments as per my example above). You should not add any HTML tags to the JavaScript file such as <html>, <body>, etc. You also do not need to include <script> tags which will generate errors.
is it possible to write the JS code without an HTML declaration
I'm not exactly sure what you mean by this, but I'll attempt to explain. If you were to visit http://www.example.com/friendship.js then you would be shown the raw JavaScript code in that file. The code would not be executed automatically. You will need to initiate the JavaScript from an HTML file itself, just as you've done in your HTML with onclick="mySpace()".
The question is trivial, but I'm dumb as rock with JS, and I'd like to save myself some of the precious time I need. For some reasons, nothing happens when I call a method from a javascript file in HTML:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src = "game.js"></script>
<button onclick = "init()">Start</button>
</body>
</html>
And game.js:
function init(){
alert("external fn clicked");
}
Needless to say, the alert does not appear as expected. What am I missing?
The reason was entirely trivial - the console is actually useful (ctrl+shift +j on Windows and Chrome). The js did not load properly due to a syntax error.