Getting data from another file - javascript

I want to get the data which is in <script></script> tags on hello.html to index.html. How can i do that?
index.html:
<head>
<script>
// some codes
</script>
</head>
<body>
<div>
<!-- result will be come here -->
</div>
</body>
</html>
hello.html:
<html>
<head>
</head>
<body>
<script>
document.writeln("hello world");
</script>
</body>
</html>
edit: i want the "document.writeln("hello world");" part, it must be string.

save the script separately as myScript.js and then you can use it in both html files with the script include tag! <script src="myScript.js"></script>

Move the script into a new file, such as script.js, then add this to both files:
<script src="script.js"></script>

Related

JQuery Ui Laravel is not a function

I have laravel layout
<html> //layout.blade.php
<head>
<script src="/js/jquery.js"></script>
<script src="/js/jquery-ui.js"></script>
</head>
<body>
#yield("content")
</body>
</html>
And my view
#extends("layout")
#section("content")
<ul class="test">
<li>1</li>
<li>2</li>
</ul>
<script>
$(function() {
$(".test").selectable();
});
</script>
#endsection
My browser console always show me $(...).selectable is not a function
But if i make same without layout or without anonymous function this works
I think location is changed, because of route.
So you'd better to specify the correct url of "public" folder.
Please change like this.
<html> //layout.blade.php
<head>
<script src="{{URL::Asset('/js/jquery.js')}}"></script>
<script src="{{URL::Asset('/js/jquery-ui.js')}}"></script>
</head>
<body>
#yield("content")
</body>
</html>
As mentioned in the above question this kind of problem usually arises when you try to pass an argument or route variable. So it would be wise to use asset() or secure_asset() while using your resources in the page.
<html> //layout.blade.php
<head>
<script src="{{ asset('js/jquery.js') }}"></script>
<script src="{{ asset('js/jquery-ui.js') }}"></script>
</head>
<body>
#yield("content")
</body>
</html>
Also please check the network section of your browser to make sure your resources are loading perfectly.

Separate HTML / JavaScript

I'm attempting to have my JavaScript code in a file apart from my HTML file.
Linking the 2 scripts between each other works, however stuff like the function document.getElementById() doesn't.
Anyone know how to fix this?
HTML code:
<!DOCTYPE HTML>
<html>
<head>
<title>Boost</title>
<script src="javascript.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<h3>
<p id="TopTextParagraph">Hi there</p>
<div>
<button id="clickNext">Next</button>
</div>
</h3>
</body>
</html>
JavaScript code:
document.getElementById("clickNext").onclick = goNext;
function goNext() {
console.log("stuff here")
}
JavaScript works when I put it in the HTML file using <script> </script>, just don't know how to make it work in a separate JavaScript file.
You are adding the script inside head tag. When that snippet is executed clickNext element does not exist in the dom
You can add the script near the closing body tag to resolve the problem & remove from the head tag
<body>
<h3>
<p id="TopTextParagraph"> Hi there</p>
<div>< button id="clickNext"> Next</button></div>
</h3>
<script src="javascript.js"></script>
</body>

jQuery click event not working on HTML page

I am having a lot of trouble trying to add text to an existing <p> element using jQuery. I have tried many different methods but nothing has worked so far. Here is the code for the html file:
<!doctype html>
<html>
<head>
<script src="index1.js"></script>
<title>Drinking Game</title>
</head>
<body>
<button id="creategame" >Create game</button>
<p id="demo">Hello</p>
<script>
$(document).ready(function(){
$('#creategame').click(function(){
$("#demo").append("Test");
});
});
</script>
</body>
</html>
My guess is you don't load jQuery file, and the console has
$ is not defined
error. Simply, add
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
to <head> tag
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="index1.js"></script>
<title>Drinking Game</title>
</head>
You are missing the jQuery file. Add this code <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> to your file above the <script src="index1.js"></script>. Make sure it's above it because if it's not then you can't call the jQuery functions in the your index1.js file.
try using the .html() function:
$("#demo").html("Test");
The following worked for me.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id='createGame' class="btn btn-default">Click</button>
<p id="demo">Hello</p>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script>
$(document).ready(function() {
$("#createGame").click(function(){
$("#demo").append("Test");
});
});
</script>
</body>
</html>
You need to reference jQuery in a <script> tag somewhere.

Html page not executing the java script

This is a simple hello world in java script which is ref. in html via separate js file. View Page Src of html shows this:
<html>
<head>
<script type="text/javascript" src="HelloWorld.js"></script>
</head>
</html>
HelloWorld.js :
<html>
<header>
<script language="javascript" type="text/javascript">
document.write("Hello World!");
</script>
</header>
</html>
But Hello World not displayed in browser when I double click the html file.
remove html, header, script tag in your js file
document.write("Hello World!");
you js file contains HTML
<html>
<header>
<script language="javascript" type="text/javascript">
document.write("Hello World!");
</script>
</header>
</html>
Instead it should contain only js code like
document.write("Hello World!");

How do I call individual methods from a Javascript file

In the javascript assets file I have a jstester.js file like this:
function hehe()
{
alert("wedsdsd");
}
document.write("fdygsdfysdgf");
Then in the public index.html file I have this:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script src="/assets/jstester.js">
hehe();
</script>
</body>
</html>
So I thought that is how I can call a method from my Javascript file but looks like it is not working, no message box shows up... So what is the correct way of doing this?
If a <script> has a src then the text content of the element will be ignored.
so you can't do:
<script type="text/javascript" src="assets/jstester.js">
hehe();
</script>
but:
<script type="text/javascript" src="assets/jstester.js"></script>
<script>hehe();</script>
This is what you looking for:
<body>
<script src="/assets/jstester.js"></script>
<script type="text/javascript">hehe();</script>
</body>

Categories