Javascript XMLHttpRequest，使用超过1个将不起作用，只使用第一个。需要使用多个

为什么在这段代码中它只加载第一个脚本？由于某种原因，下一个不会加载，我尝试了不同的组合，但没有任何效果，我尝试了更改变量名和代码中的值，但没有任何效果使代码工作。我应该做些什么来让脚本一次又一次地工作？像一个环

<label for="img1" class="container1">
     <img src="img/cover/1.jpg" alt="" class="container1">
     <div>
     <input id="img1" type="radio" name="img-descr">
     <div>
         <p id="Title1"></p>
         <p id="Runtime1"></p>
         <p id="Plot1"></p>
         <script>
             var xhttp = new XMLHttpRequest();
             xhttp.onreadystatechange = function() {
                 if (xhttp.readyState == 4 && xhttp.status == 200) {
                    var fullMovie = JSON.parse(xhttp.responseText)
                    var movie = { title: fullMovie.Title, runtime: fullMovie.Runtime, plot: fullMovie.Plot,};
                    document.getElementById('Title1').innerText = movie.title;
                    document.getElementById('Runtime1').innerText = movie.runtime;
                    document.getElementById('Plot1').innerText = movie.plot;
                    }
                    };
                    xhttp.open("GET", "http://www.omdbapi.com/?i=tt3322364&plot=short&r=json", true);
                    xhttp.send();
        </script>
    </div>
</div>
</label>
<label for="img2">
    <img src="img/cover/2.jpg" alt="" class="container1">
    <div>
        <input id="img2" type="radio" name="img-descr">
        <div>
            <p id="Title2">Title2</p>
            <p id="Runtime2">Title2</p>
            <p id="Plot2"></p>
            <script>
                var xhttp2 = new XMLHttpRequest();
                xhttp2.onreadystatechange = function() {
                    if (xhttp2.readyState == 4 && xhttp2.status == 200) {
                        var fullMovie2 = JSON.parse(xhttp2.responseText)
                        var movie2 = { title2: fullMovie2.Title, runtime2: fullMovie2.Runtime, plot2: fullMovie2.Plot,};
                                        document.getElementById('Title2').innerText = movie2.title2;
                document.getElementById('Runtime2').innerText = movie2.runtime2;
                document.getElementById('Plot2').innerText = movie2.plot2;
                }
                };
                xhttp2.open("GET", "http://www.omdbapi.com/?i=tt1528854&plot=short&r=json", true);
                xhttp2.send();
                }
            </script>
        </div>
    </div>
</label>

var xhttp=newXMLHttpRequest（）；
xhttp.onreadystatechange=函数（）{
如果（xhttp.readyState==4&&xhttp.status==200）{
var fullMovie=JSON.parse（xhttp.responseText）
var movie={title:fullMovie.title，运行时：fullMovie.runtime，plot:fullMovie.plot，}；
document.getElementById（'Title1'）。innerText=movie.title；
document.getElementById（'Runtime1'）。innerText=movie.runtime；
document.getElementById（'Plot1'）。innerText=movie.plot；
}
};
xhttp.open（“GET”http://www.omdbapi.com/?i=tt3322364&plot=short&r=json“，对）；
xhttp.send（）；
标题2

标题2


var xhttp2=新的XMLHttpRequest（）；
xhttp2.onreadystatechange=函数（）{
if（xhttp2.readyState==4&&xhttp2.status==200）{
var fullMovie2=JSON.parse（xhttp2.responseText）
var movie2={title2:fullMovie2.Title，runtime2:fullMovie2.Runtime，plot2:fullMovie2.Plot，}；
document.getElementById（'Title2'）。innerText=movie2.Title2；
document.getElementById（'Runtime2'）。innerText=movie2.Runtime2；
document.getElementById（'Plot2'）。innerText=movie2.Plot2；
}
};
xhttp2.open（“GET”http://www.omdbapi.com/?i=tt1528854&plot=short&r=json“，对）；
xhttp2.send（）；
}

好的，它们现在都可以工作了。我把它们都做成了IIFE（立即调用函数表达式）。看

（函数（）{
xHR（）；
函数xHR（）{
var xhttp=newXMLHttpRequest（）；
xhttp.onreadystatechange=函数（）{
如果（xhttp.readyState==4&&xhttp.status==200）{
var fullMovie=JSON.parse（xhttp.responseText）
var电影={
片名：完整电影，片名，
运行时：fullMovie.runtime，
剧情：完整电影，剧情，
};
document.getElementById（'Title1'）。innerText=movie.title；
document.getElementById（'Runtime1'）。innerText=movie.runtime；
document.getElementById（'Plot1'）。innerText=movie.plot；
xHR（）；
}
};
xhttp.open（“GET”http://www.omdbapi.com/?i=tt3322364&plot=short&r=json“，对）；
xhttp.send（）；
}
})();
（功能（）{
xHR2（）；
函数xHR2（）{
var xhttp2=新的XMLHttpRequest（）；
xhttp2.onreadystatechange=函数（）{
if（xhttp2.readyState==4&&xhttp2.status==200）{
var fullMovie2=JSON.parse（xhttp2.responseText）
var电影2={
标题2：完整电影2.标题，
runtime2:fullMovie2.Runtime，
情节2：完整电影2.情节，
};
document.getElementById（'Title2'）。innerText=movie2.Title2；
document.getElementById（'Runtime2'）。innerText=movie2.Runtime2；
document.getElementById（'Plot2'）。innerText=movie2.Plot2；
xHR2（）；
}
}
xhttp2.open（“GET”http://www.omdbapi.com/?i=tt1528854&plot=short&r=json“，假）；
xhttp2.send（）；
}
})();




标题2

标题2


您应该清理代码，以便在每个要获取值的位置调用单个函数。您可以在html的标题部分使用一个脚本，其函数如下：

getMovieData( moveID, titleID, runtimeID, plotID ) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
       var fullMovie = JSON.parse(xhttp.responseText)
       var movie = { title: fullMovie.Title, runtime: fullMovie.Runtime, plot: fullMovie.Plot,};
       document.getElementById(titleID).innerText = movie.title;
       document.getElementById(runtimeID).innerText = movie.runtime;
       document.getElementById(plotID).innerText = movie.plot;
    }
  };
  xhttp.open("GET", "http://www.omdbapi.com/?i=" . movieID . "&plot=short&r=json", true);
  xhttp.send();
}

然后在你的每个标签中调用它。它更干净，扩展性更好，应该可以消除你的bug
 有一些错误


在最后一个
标记的正上方有一个错误的“}”
有一些错误标记的变量
最重要的是
xhttp变量相互碰撞

bitfiddler说得对，您应该将脚本提取到一个单独的文件中

忽略html，以下是基于您的代码的工作代码，用于修复上面列出的项目：

                            <p id="Title1"></p>
                            <p id="Runtime1"></p>
                            <p id="Plot1"></p>
                            <script>
                                var xhttp1 = new XMLHttpRequest();
                                xhttp1.onreadystatechange = function() {
                                    if (xhttp1.readyState == 4 && xhttp1.status == 200) {
                                        var fullMovie1 = JSON.parse(xhttp1.responseText)
                                        var movie1 = { title1: fullMovie1.Title, runtime1: fullMovie1.Runtime, plot1: fullMovie1.Plot};
                                        document.getElementById('Title1').innerText = movie1.title1;
                                        document.getElementById('Runtime1').innerText = movie1.runtime1;
                                        document.getElementById('Plot1').innerText = movie1.plot1;
                                    }
                                };
                                xhttp1.open("GET", "http://www.omdbapi.com/?i=tt3322364&plot=short&r=json", true);
                                xhttp1.send();
                            </script>

                            <p id="Title2"></p>
                            <p id="Runtime2"></p>
                            <p id="Plot2"></p>
                            <script>
                                var xhttp2 = new XMLHttpRequest();
                                xhttp2.onreadystatechange = function() {
                                    if (xhttp2.readyState == 4 && xhttp2.status == 200) {
                                        var fullMovie2 = JSON.parse(xhttp2.responseText)
                                        var movie2 = { title2: fullMovie2.Title, runtime2: fullMovie2.Runtime, plot2: fullMovie2.Plot};
                                        document.getElementById('Title2').innerText = movie2.title2;
                                        document.getElementById('Runtime2').innerText = movie2.runtime2;
                                        document.getElementById('Plot2').innerText = movie2.plot2;
                                    }
                                };
                                xhttp2.open("GET", "http://www.omdbapi.com/?i=tt1528854&plot=short&r=json", true);
                                xhttp2.send();
                            </script>




var xhttp1=新的XMLHttpRequest（）；
xhttp1.onreadystatechange=函数（）{
如果（xhttp1.readyState==4&&xhttp1.status==200）{
var fullMovie1=JSON.parse（xhttp1.responseText）
var movie1={title1:fullMovie1.Title，runtime1:fullMovie1.Runtime，plot1:fullMovie1.Plot}；
document.getElementById（'Title1'）。innerText=movie1.Title1；
document.getElementById（'Runtime1'）。innerText=movie1.Runtime1；
document.getElementById（'Plot1'）。innerText=movie1.Plot1；
}
};
xhttp1.open（“GET”http://www.omdbapi.com/?i=tt332236