I plugin external script.js to index.html in react js project .
<!DOCTYPE html>
<html lang="en">
<head>
....
</head>
<body>
<script id="zoom" src="./script.js"></script>
</body>
</html>
and i try use function in this script in automatic generate object in react file:
const image = document.createElement("IMG");
image.onclick="magnify(this, 3)";
image.onmousemove="init(event)";
It's not work for me (i have error with type),but if add attribute in dev tool its work enter image description here . Im sure i add script with this information.
How add it's i my code ?
sorry for my bad english
I see in your devtools the image is being rendered, is the problem that you cannot see it?
Try setting the width and height of the image:
image.style.cssText = "width: 100px; height: 100px"
Related
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is test Page for Learn JS</title>
<script type="text/javascript" src="/learn/test.js"></script>
</head>
<body>
<input type="button" value="Time" onclick="daytime()">
<p id="now"></p>
</body>
</html>
This is test.js
function daytime() {
document.getElementById("now").innerHTML=Date();
}
why click button,is nothing to do.
but insert js code to html,it's working
maybe you can check your js and html folder location.
can try to put your js and html in a same folder, and update your script src to "./test.js"
You must use the script tag and pass the address of your "test.js" file to the src attribute. Assuming your test.js is in the same directory as your test.html file, you can use this to link them up.
<script src = "./test.js"></script>
Place the script tag just before the closing of body tag, this helps in loading the body content first and then the JavaScript, making the user experience better.
looks like the issue is how you include the script file.
src="/learn/test.js"
If the folder "learn" is in the same folder as the HTML file, try removing the "/"
src="learn/test.js"
WHAT is problem in linking javascript code to html code???
my html code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>PARUL</title>
<script src="script.js"></script>
<script>
console.log(x)
</script>
</head>
<body></body>
</html>
my javascript code:
var x="hello world";
You have already linked your HTML code with your JS file.
Follow these steps :
Right click on your mouse and you will get the option Inspect at the bottom.
Click on it and you will get the developer tool having multiple tabs in it like Elements,Console,etc.
You just need to click on the Console tab. Then you will able to see the output which you have given the statement console.log("")
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.
Well i am working on a website wordpress and i want to add javascript code to the article but it doesnt run !!
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script type="text/javascript">
document.write(5 + 6);
</script>
</body>
</html>
here the code , i tried custom field but it doesnt work also .
enter image description here
where i add the code exactly
If you're using gutenberg editor then you need to add custom html block to print out your script.
Check my backend screenshot: https://prnt.sc/rjqti4
Check my frontend screenshot: https://prnt.sc/rjqu3y
And if you're trying to do it on custom code then you should go for create a custom template or on single.php or on page.php file you simply use this code to load the desired items. Basically this is not the proper way to add script in WordPress though if you're using this script only on certain pages.
I would assume wordpress is stripping it out, you may need a plugin such as https://wordpress.org/plugins/simple-embed-code/#description to use script tags inside a post
You can add javascript code inside WordPress post > "Text" tab like:
<script type="text/javascript">// <![CDATA[
document.write(5 + 6);
console.log("Please check console: ", (5+6));
// ]]></script>
After adding this, save the WP post and then view the page in the browser.
<!doctype html>
<html lang="en">
<head>
<title>Greetings Page</title>
<link rel="stylesheet" href="./first.css" />
</head>
<body>
<h1>Greetings</h1>
<p id="greeting">Hello, World</p>
<script type="text/javascript">
setTimeout(function() {
document.getElementById('greeting').innerHTML = 'Hello JavaScript!';
}, 3000);
</script>
</body>
</html>
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.