Xhr multiple request javascript

Question

I am using the following script to read the information from an html request.

function runSearch(searchid, fullMovie) {    
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == XMLHttpRequest.DONE) {
        var fullMovie = JSON.parse(xhr.responseText);
        var movie = { title: fullMovie.Title, runtime: fullMovie.Runtime, plot: fullMovie.Plot };
        document.getElementById('Title').innerText = movie.title;
        document.getElementById('Runtime').innerText = movie.runtime;
        document.getElementById('Plot').innerText = movie.plot
    }
};
    xhr.open('GET', 'http://www.omdbapi.com/?i=' +searchid+ '&plot=short&r=json', true);
    xhr.send(null);
}

How can I do to change the searchid from the xhr.open to use the id="searchid" from a div tag?

<div>
<div id="tt0110912">
    <h1 id="Title">Title from tt00110912</h1>
    <p id="Runtime">Runtime from id</p>
    <p id="Plot">Plot from id</p>
</div>
</div>
   <br>
<div>
<div id="tt3322364">
   <h1 id="Title">Title from tt3322364</h1>
   <p id="Runtime">Runtime from id</p>
   <p id="Plot">Plot from id`enter code here`</p>
</div>
</div>

Is it possible to run this script several times with different xhr requests? How can i do this if possible?

EDIT: cant make the code work! Theoricaly i need the code to make an xhr request depending on the div id class and fill the information inside that div with the xhr response from that id. Think of a movie database that will show specific movie information from a movie list.

Answer 1

Wrap your code into function and then call it in loop or manually several times with different searchid values.

function runSearch(searchid, fullMovie) {

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == XMLHttpRequest.DONE) {
            var fullMovie = JSON.parse(xhr.responseText);
            var movie = { title: fullMovie.Title, runtime: fullMovie.Runtime, plot: fullMovie.Plot };
            document.getElementById('Title').innerText = movie.title;
            document.getElementById('Runtime').innerText = movie.runtime;
            document.getElementById('Plot').innerText = movie.plot
        }
    };

    xhr.open('GET', 'http://www.omdbapi.com/?i=' + searchid + '&plot=short&r=json', true);
    xhr.send(null);
}

Then call it like this:

runSearch('your search id', fullMovie);

Answer 2

<div id="runSearch('tt0110912', fullMovie)">

JavaScript needs to go in a script element (or an intrinsic event attribute, but they are terrible and should be avoided).

The id attribute is where you put an identifier for an element. It isn't JavaScript and it makes no sense to put JavaScript there.

<script>
runSearch('tt0110912', fullMovie)
</script>

---

Your HTML is invalid. An id must be unique in a document. You can't reuse the if Title (etc) within the same document. Look at using classes instead.