why script doesnt run? - javascript

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>

Related

I get "function is not defined" when I move a Javascript function from in-line code, to a separate js file

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.

Dynamically reading text file into page

I'm trying to load a .txt file into my simple html page. I'm very noobish and all the code i got is stolen from stackoverflow.
The text file is in the same folder as the html file and contains some text that I'd like to have shown in a div and not just loaded in at the start but dynamically updated (in a 1 sec interval).
The Page that results from the code is just empty.
I am using Chrome 73.
I only use the html file and the txt file. No other files are in the folder.
<html>
<head>
<script type="text/javascript">
setInterval(read,1000);
function read(){
jQuery.get('file.txt',function(data){$('#container').html(data);});
}
read();
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
I don't know what's wrong with this code. Am I missing libraries? If you came up with a completely new code that would be appreciated as well.
Yes, you are missing the jQuery library. Try it like this and let me know:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
function read(){
jQuery.get('file.txt',function(data){$('#container').html(data);});
setTimeout(function(){read() },1000);
}
read();
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
Reference:
https://stackoverflow.com/a/24320973/1447509
See note in italics at very bottom of this article
what about a simple jQuery Load ?
$("#container").load("file.txt");
http://api.jquery.com/load/

How to set real time input value to link through iFrame?

Please see below 2 HTML pages, I have 1 page inside iFrame call other page.
what I exactly need, I want in "iframe.html" you can see text field. when I write something in that input box, real time that value should take inside href=""
Note : iframe.html page is pure html page. I can't use jquery inside that page. I have to access that page from index.html page.
I have tried some jquery code, but only I wrote function.
this is index.html page.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<iframe src="iframe.html" id="myframe"></iframe>
<script type="text/javascript">
$($("#myframe").contents().find('body')).on("click", 'a[href="#editable-link"]', function(e) {
});
</script>
</body>
</html>
And this is "iframe.html" page.
<html>
<head>
<input type="text" placeholder="Enter URL">
Read More
</body>
</html>
can anyone help me to resolve this problem. it will very helpful.
thanks in advance.
Try
$('#myframe').load(function(){
$('#myframe').contents().find('input').bind('input',function(e) {
var url = $('#myframe').contents().find('input').val();
$('#myframe').contents().find('#editable-link').prop('href',url);
});
});

Get page url from embeded JS script

I have an HTML page that calls a JS file. Within that JS file I need to know what the URL of the HTML page is.
So far I have this.
HTML -
<!doctype html>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Within my main.js I have the following:
$(function() {
$ = jQuery;
window.remoteUser = "%globals_server_REMOTE_USER%";
window.targetURL = "%globals_asset_url%";
console.log(document.referrer);
});
I thought document.referrer would return the URL of the html page. However it returns a blank line in the console.
Any help would be great. Thanks
Try this,
console.log(document.URL);
OR
console.log(window.location.href);
since i read that it doesn't work in some versions of firefox
location.href used to get url the of page.
jQuery(document).ready(function(){
jQuery("#url1").html(location.href);
});
DEMO

Using 3rd party script in html

So actually i am not much familiar with javascript that's why i am going to post it to know something that i am going to know,
So here it is,
Suppose i have html page and hosted on some where on internet and its coding is,
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......</p>
The link of the document ......
</body>
</html>
In this code Link anchor text use for hyperlink, I would like to use javascript that call from another site, where the link exist and it display over there like this.
<script type="text/javascript" src="http://mysite.com/java.js">
I want to know that what code i put on java.js so it show the hyperlink in my html file and how and where do i add code to html page and in javascript
Advance Thanks for help :)
Apologies in advance if I misunderstood your question, but it sounds like you'd like to use JavaScript from another location on your site.
Using the example above, here's what that would look like:
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......</p>
The link of the document ......
<script type="text/javascript" src="http://mysite.com/java.js"></script>
</body>
</html>
You could also link to it in the <head> instead, but it's better for performance if the scripts are placed in the footer.
your anchor:
href="javascript:linksomething()"
and js:
function linksomething(){
window.location.href=url;
}
is this what you want?

Categories

Resources