This question already has answers here:
What does a script-Tag with src AND content mean?
(4 answers)
Closed 1 year ago.
hello i am trying to get a function in a script folder to work on an html page
I have this set up html
<script src="add.js">
txt = document.createElement('p')
document.body.appendChild(txt)
txt.innerHTML = add(2);
</script>
and script file function
function add(a){
return a+a
}
Its not working and im not sure why.
i have tried wrapping the whole statements inside a function and calling that. tried onload in different positions and didnt work.
thank you
As Mike said in the comments you can't write your script that way
Two ways to solve it
1:
<script src="add.js"></scirpt>
<script>
//...Code here
</script>
2: preferred:
<script>
txt = document.createElement('p');
document.body.appendChild(txt);
txt.innerHTML = add(2);
function add(a){
return a+a;
}
</script>
Related
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 3 years ago.
HTML:
<p id="demo"></p>
the script:
document.getElementById("demo").innerHTML = 5 + 6;
It is supposed to show the result but nothing happens. I added a separate myScript.js file to write the code. In HTML I wrote:
<script type="text/javascript" src="myScript.js"></script>
What has to be the problem ?
You need an element with id demo for this to work
document.getElementById("demo").innerHTML = 5 + 6;
<div id="demo"></div>
The problem in your case is probably the positioning of the included script tag. It is executed, as soon as it is parsed by the browser, but the demo tag is not loaded at this point.
Try
window.onload = function() {
document.getElementById("demo").innerHTML = 5 + 6;
}
This will execute your code only after the document has loaded and the demo element is available.
This question already has answers here:
Javascript variables in HTML attributes
(5 answers)
Closed 4 years ago.
Passing a javascript variable using tag in iframe by attaching variable like this "+var+" but its not passing value to next page . is there any different way or any bug in my code please suggest.
here is my code.
<script>
var user = "user#user.com";
</script>
<iframe src="http://127.0.0.1/ve2/ve2/www/kitchen-sink/api/fm/df.php?user="+user+""></iframe>
Thanks in advance .
You cannot execute javascript directly, it has to be executed from script tags OR via an event.
<iframe id="iframe"></iframe>
<script>
var iframe = document.getElementById('iframe');
var user = "user#user.com";
iframe.setAttribute('src', "http://127.0.0.1/ve2/ve2/www/kitchen-sink/api/fm/df.php?user=" + user );
</script>
This question already has answers here:
Dynamically adding script element to a div does not execute the script
(2 answers)
Closed 5 years ago.
I am trying to insert Javascript code into HTML via Javascript.
Inserting this code into HTML does not work, the code is not executed :
<script>
function callAlert(){
alert('test');
}
</script>
This code is executed :
<img src="xxx" onerror="alert('test')">
This does not call the function so the alert is not executed :
<img src="xxx" onerror="callAlert();">
Why onerror alert is executed and onerror calling function not?
You can no longer insert a <script> tag using el.innerHTML. This is a security issue that has been added fairly recently.
Go to this page:
https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
and scroll down to the Security considerations section.
It mentions that you can not add a <script> tag but it is not fool proof. Things like you describe can still cause script to run:
const name = "<img src='x' onerror='alert(1)'>";
el.innerHTML = name; // shows the alert
If you really need to add new JavaScript from existing JavaScript you will need to do something like the following:
var s = document.createElement('script');
s.textContent = 'function callAlert(){alert(\'test\');}';
document.head.appendChild(s);
callAlert();
Try putting the script into the head of the page, it could be that the function is executed before it's defiend.
If this isn't working please tell what error your console returns.
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 5 years ago.
Hello guys I would like some help since I am new to JS
I expect this piece of code to show an alert with the href of the element "aaa" but nothing happens. Could you explain what I am doing wrong?
thanks
<html>
<body>
<script type="text/javascript">
function myFunction(){
var xxx = document.getElementById("aaa").href;
alert(xxx);
}
myFunction();
</script>
file word
</body>
</html>
Please delete this question as it is a duplicate of
Why does jQuery or a DOM method such as getElementById not find the element?
I am sorry for posting .. I am new to JS and I didn't know what to search for in the first place
The problem is that your script is executed before the a tag is rendered. Put the script tag after the a tag and it should work.
First of all, you should use Developer Console for finding errors (right click page, then Inspect Element).
Anyway, the problem seems to be that your JavaScript is done before you have made the anchor (a) element.
<html>
<body>
file word
<script type="text/javascript">
function myFunction(){
var xxx = document.getElementById("aaa").href;
alert(xxx);
}
myFunction();
</script>
</body>
This should work.
The script is executed before the DOM is ready so there is no element with id aaa.
You can add the script inside
window.load=function(){
function myFunction(){
var xxx = document.getElementById("aaa").href;
alert(xxx);
}
myFunction();
}
You can also define the script tag near closing body tag. In this case the DOM is ready and it will able to find an element with id
<body>
file word
<script type="text/javascript">
function myFunction(){
var xxx = document.getElementById("aaa").href;
alert(xxx);
}
myFunction();
</script>
</body>
Just as Patrick said, move the tag down after and I think this value of href is what you looking for
var xxx = document.getElementById("aaa").getAttribute("href");
This question already has answers here:
Can you make a javascript function replace itself on the page with custom html?
(4 answers)
Closed 5 years ago.
I need to create a javascript that return a iframe tag.
the customer will paste a script in where the iframe need to be, and then the script should create a iframe.
Must be like this:
<script src="http://www.helloworld.com/script/loadcustomerframe.js" data-customer="14532"></script>
then the script should load a iframe to a url somewhere, and also i need to read the "data-customer".
I am a backend developer c#, not a frontend. I have try several days now, i cant get it to work.
Please help.
Thanks
Something like this should work:
$(document).ready(() => {
$("[data-customer]").each(function() {
let customerId = $(this).data("customer");
$(this).replaceWith(`<p>This is customer #${customerId}.</p>`);
// The following comment is an example of how you could use an iframe
//$(this).replaceWith(`<iframe src="http://example.org/customer/${customerId}>Hello!</iframe>`);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-customer="1"></div>
<div data-customer="2"></div>
<div data-customer="3"></div>
You'll only need to have the script appear once (most likely in your <head>) and it will replace any <div> that has a data-customer attribute. You simply just need to figure out the proper URL for your <iframe>.
Si basically your JS code will do the trick,
First need to create a JS code and host it into some server to get it by fetching it, so image that your JS code is hosted into https://www.mygreatjscode.com/myjscode.js
So your JS code will do the rest,
like this using pure JS (with not frameworks like jQuery etc), so your myjscode.js file will contain this:
//create an autoexec function
(function(){
var body = document.getElementByTagName("body");
body = body ? body : false;
if (body){
var iframe = document.createElement("iframe");
iframe.setAttribute("id", "MY_CUSTOM_ID");
//here set the url that the iframe will be render
iframe.setAttribute("src", "https://stackoverflow.com/");
//finally insert into the body of page
body.appendChild(iframe);
}
})();
Finally you need to insert the Script Tag into your page like this
<script src="https://www.mygreatjscode.com/myjscode.js" data-customer="14532"></script>