Using button from another file - javascript

Good day! I'm new to web development and still studying.
I'm trying to create a simple counter using javascript.
index.html
<script src="test.js"></script>
<h1>Count </h1>
<p id="count">0</p>
<button onclick ="mycounter()">Add Count</button>
test.js
var counter = 0;
function mycounter(){
counter = counter + 1;
document.getElementById('count').innerHTML = counter;}
Now this code works perfectly fine. Is it possible to transfer that button to another html file and everytime that button is clicked from the other file, the count display on my index is updated?
Any help would be much appreciated. Thank you.

If you want to transfer part of your html in to another file and use it in a separate file, that is called templating. The usual pattern is to load the contents of the "other" file via XHR and add it to the DOM.
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("buttonholder").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}

Related

How can I retrieve data from a external URL to show in my webpage?

As a learning exercise I'm trying to retrieve the track_artist_name from a url used by a radio sation to show the song being played.
This could be a case of "Same-Origin-Policy" but I dont have enough knowledge to tell.
Could someone please help me to workaround the conflict ? Also, I know "this.responseText" will show everything, I will try to filter it once I can retrieve the Data, but if you feel generous and want to trow me also that bone, I will be really grateful to you. Thank you : )
<html>
<body>
<div id="data">
</div>
<button type="button" onclick="loadXMLDoc()">Get Data</button>
<script>
function loadXMLDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("data").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "http://np.tritondigital.com/public/nowplaying?mountName=XERC_FM&numberToFetch=1", true);
xhttp.send();
}
</script>
</body>
</html>

How to scrape and run script in browser with javascript?

I'm making my own website(https://khushit-shah.github.io/) with the help of github.dev.
Now on top of every repository, I wanted to show some content featuring the repository, which should be flexible and easily changeable. So, I created a file in repository named "repodesc.html". which contains the html to we shown!. Then using following code I am adding that html file for every repositories.
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("{{ repository.id }}").innerHTML = this.responseText;
}
};
xhttp.open("GET", "https://raw.githubusercontent.com/khushit-shah/{{ repository.name }}/master/repodesc.html", true);
xhttp.send();
This adds the HTML in https://raw.githubusercontent.com/khushit-shah/Cursor.js/master/repodesc.html to my website(top of Cursor.js). But the script tag in the repodesc is not getting executed.
Code in repodesc.html
<h1 cursor-animate cursor-loop-reverse> Cursor.js </h1>
<script>
console.log("Is it working?");
js = "https://raw.githubusercontent.com/khushit-shah/Cursor.js/master/cursor-v.2.0.2.js";
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
eval(this.responseText);
}
};
xhttp.open("GET", js, true);
xhttp.send();
</script>
I even tried repodesc.html
<h1 cursor-animate cursor-loop-reverse> Cursor.js </h1>
<script src="https://cdn.jsdelivr.net/gh/khushit-shah/Cursor.js#latest/cursor.v1.0.0.min.js" >
</script>
expected result : Cursor.js should be executed and the h1 tag should be animated with type writing effect!
actual result: the script in repodesc.html is not getting executed!

How to parse JSON containing HTML as HTML

I want to parse a JSON object response.indexText which contains HTML tags (validated with JSONLint).
{
"indexText": "<div id=\"content-home\"><h1> Hello World! <\/h1> <p>Some text.<\/p><p>Some more text.<\/p></div>"
}
into <div id="indexText"></div>
But when I use (EDIT after first answer. window.onload inside and outside does not change the problem.)
window.onload = function () {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
let response = JSON.parse(xhttp.responseText);
document.getElementById("indexText").innerHTML = response.indexText;
}
};
xhttp.open("GET", "./json/en.json", true);
xhttp.send();
};
and reload the page it will be empty. What is going wrong? How can I parse the JSON content such that the client will render the content as HTML?
What I am trying to do. At the moment my page consists of multiple *.html files. All pages have the same navigation bar and the same footer. Only the content does change. Now I am trying to store the content inside of my JSON file such that I can change the text when clicking navigation links.
Put your code inside window.onload and you will get your required result.
Check the below working code:
window.onload = function() {
var response = {
"indexText": "<div id=\"content-home\"><h1> Hello World! <\/h1> <p>Some text.<\/p><p>Some more text.<\/p></div>"
};
document.getElementById("indexText").innerHTML = response.indexText;
};
<div id="indexText"></div>
Working JSfiddle here : https://jsfiddle.net/y2rkhp8g/1/

Post form data to php without page refresh

I am trying to post form data, an array to php file without page refresh. I am using ajax which doesn't seem to be working. Below is form syntax and ajax. Can somebody please help me? Thanks.
<form name="postcontent" id="postcontent">
function[]; //just for an example of data
<button type="button" id="submitform" onclick="posttophp" >Send</button>
<script>
function posttophp() {
var xhttp = new XMLHttpRequest();
xhttp1.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("submitform").innerHTML = this.responseText;
}
};
xhttp.open("POST", "options.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("
function_Options1[]=function[]")
}
</script>
In php, I store function_Options1[] in another variable and use further.
Two ideas to try:
Maybe the script should be placed before calling the function, but not sure about this.
Try onclick="posttophp();"

Javascript doesn't update document in browser

I have a data.json in my server directory. I am using the following code from w3school to show the data in the browser. W3school Snippet Link
<button type="button" onclick="loadDoc()">Change Content</button>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "/static/data.json", true);
xhttp.send();
}
</script>
</html>
When i click the button, I am able to see the data.json in my webpage. But when i change the data.json and click the button again (without refreshing the page), the updated data isn't shown in the browser.
Am i missing something here?
Well since you are using XMLHttpRequest, you need to make sure that every request is kind of unique, you can do something like:
var uniqueId = (new Date()).getTime()
xhttp.open("GET", "/static/data.json?debug=" + uniqueId, true);
If you were using jQuery ajax (http://api.jquery.com/jquery.ajax/), you just have to pass cache=false, like this:
$.ajax({
cache: false,
//other options...
});
xhttp.open("GET", "/static/data.json?something=RANDOMGUID", true);

Categories

Resources