I want to split HTML file and separate javascript into an external file. In the HTML file, I have an element <p id="log">, which I now access using document.getElementById("log").innerHTML.
How to access this element from external JS?
Is it ok when I just use document.getElementById("log").innerHTML in the external JS? Or I need to pass element as parameter to some function like
function myFunc(logElement) {
logElement.innerHTML += "some new data";
}
Or there are another common practices?
Based on what you wrote, you are trying to create a separate JS file to access a value inside a HTML tag. If that's all you want to do, just insert a <script> tag in the HTML file you want to access the data:
<script src="file.js"></script>
From there you use your function to access it. And yes, you can use document.getElementById("log").innerHTML as long as you have the script tag in the HTML file you want to access the data.
Related
Say I have 2 html files, index.html, and example.html and they both use script.js. If I were to use a statement like document.createElement("p"); in the script, how would I specify which html file I want to make the paragraph in?
One way to do this is to play with classes/IDs. The JavaScript file will work on whichever DOM is loaded, whether it's a DOM based on your first HTML or the second.
If you were to do this, you could--in theory--have a specific ID on one HTML file and another ID on the other. Your JS file can append the paragraph to the node with that ID, but only if the ID is actually on the DOM.
This is far from ideal though.
If you don't want the element to be created in every HTML file in which the JS file is included, the code should be invoked from the HTML file as appropriate. For example, you would add a <script> block in the HTML file that calls createMyElement, and createMyElement would be a function in the shared JS file.
Where do you intend on injecting the paragraph element? You could give each section a different id and do something along the lines of :
function InjectHtmlElement(bodyId, element, modifyBodyCallBack)
{
let body = ducement.getElementById(bodyId);
if(body == null)
{
return
}
modifyBodyCallBack(body, element);
}
<body id="first"></body>
<body id="second"></body>
This isn't ideal but it'll work.
by appending the node element to an element in the desired file.
var p = document.createElement("p");
document.body.appendChild(p);
to learn more about appendChild
I have some javascript I am using a GTM custom html tag to inject on my page. I need to access a value that is on the window, is there a way to do this from GTM or do I need to put the script in my actual html now to get this value for my script?
Here is an example of what I have now that is not working:
<script type="text/javascript">
console.log(window.awesomeValue);
</script>
When I inspect the source after GTM injects the script the window.awesomeValue appears literally and is not being evaluated.
Thanks!
You will need to use a JavaScript variable to hold the value. Try this:
Create a JavaScript Variable and set the value to window.awesomeValue
Modify your custom HTML tag to use the newly created variable:
Your final code will look like:
<script type="text/javascript">
console.log({{yourNewJSVariable}});
</script>
My question is about making src in html script tag dynamic. Now, I have something like this at the bottom of the html :
<script src="https://blabla.com/assets/jxx.js"></script>
In my angular js file, I've a method to return the url prefix dynamically.
$scope.trustSrc = function(src) {
return $sce.trustAsResourceUrl($scope.pathPrefix + src);
};
And what I want to do is transform the src part to this:
<script type="text/javascript" src="{{trustSrc('/assets/jxx.js')}}"></script>
The prefix of the url changes depending on the environment. So I need to change it dynamically.
This method works if I put the script tag in the html's head portion. But mine should be outside of the head and at the bottom of the html.
What do you recommend to do this?
I'm not sure but it can be happening because of your controller's scope.
As you are using trustSrcfunction with $scopein your controller, make sure that in HTML file you are using <script></script> in controller's scope.
I have a function in javascript appending some HTML to some div like:
$("#test").html("<tr><td>" + data[0].foo + "</td></tr>");
I don't want this HTML to be in my code, so I want to place this into some external file and load it into variable. But what about data variable? How do I pass it to this external file? How do I use it?
You can store that code in a file (let's say script.js because I'm feeling creative), and using the jQuery function $.getScript( "script.js") will load the script into your page.
If you have the name in a variable, that's not a problem, you can just use
var scriptSrc="script.js";
$.getScript(scriptSrc);
Does this answer your question?
I have two JSP files a.jsp and b.jsp which shares common ".js" file. Is there any way that I can find from which jsp file the function inside common script is invoked, Without passing any parameter while calling the script function.
I think there is no way to do as you looking for -
But as a alternate way you can give the you file(a.jsp) as your element id or name and get it after clicking the element like this -
$(document).ready(function() {
$("#a").click(function(event) {
alert(event.target.id);
});
});
You could put a hidden variable in each JSP that tells you the file name.
Something like:
<input type="hidden" id="jspName" value="a.jsp"/>
Then to get it from the javascript:
var jspName = $('#jspName').val();