Adrien Pecher Adrien Pecher - 7 months ago 10
HTML Question

Weird get request when trying to change HTML attribute

So i have an html file that upon the click of a button calls this function in a seperate file :

function getRandomVideoLink(){
//AJAX request to /random-video
console.log("ajax request");
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
console.log("inside if");
console.log(xhttp.responseText);
document.getElementById("myVideo").src = xhttp.responseText;
}
};
xhttp.open("GET", "/random-videolink", true);
xhttp.send();
}


The thing is for some reason instead of changing the src attribute of the element it does a weird get request to the server and i get an an error 404 ( normal because in app.use() that handles request that aren't supported i specified to display that error). It should just change the attribute of the iframe and display another video.

If on the other hand i call it via

function change() {
document.getElementById('myVideo').src = "https://www.youtube.com/embed/BfOdWSiyWoc";
}


It works fine. note: the xhttps.responseText is the same as that link.

The relevant HTML:

<iframe id="myVideo" width="420" height="345"
src="http://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>

Answer

I think the problem is that you get a quoted url in xhttp.responseText