Question

我正在尝试阅读文本文件并根据该文本文件的内容更改网页上的图像。我尝试使用控制台日志来获取错误消息，但是我没有收到错误。 txt文件的内容字面上是我想要显示的图像的名称。下面是我的javascript和html代码。

<!DOCTYPE html>

<html>
<meta charset="utf-8"/>

<script type="text/javascript">

window.onload = function(){

var txtFile = new XMLHttpRequest();
txtFile.open("GET", "../HTML/Images/Bowl.txt", true);
console.log(txtFile);
txtFile.onreadystatechange = function() {
    allText = txtFile.responseText;
  lines = txtFile.responseText.split("\n"); // Will separate each line into an array
    if (lines === 'GDogbowl.png'){
        document.getElementById('myImage').src='../HTML/Images/GDogbowl.png'
        }
    else if (lines === 'YDogbowl.png') {
        document.getElementById('myImage').src='../HTML/Images/YDogbowl.png'
        }
    else {
        document.getElementById('myImage').src='../HTML/Images/RDogbowl.png'
           }
     }
 }
   </script>
<body>
    <table class="centerTable" >
      <tr>
        <td>
          <div class="imgContainer">

            <div>
                        <img id="fullsize" />
                        <ul id="thumbs">
                        <img id="myImage" src= "../HTML/Images/RDogbowl.png" style="width:100px">
                        </ul>
            </div>
        <div class="imgButton">
        <button id="Bowl" >Toggle Color</button>
            </div>
          </div>
        </td>
    </table>
</body>

Answer 1

你无法将数据从数组中拉出来，就好像它是一个字符串一样。要解决此问题，您必须在分割线后循环遍历阵列。像这样：

var xhr = new XMLHttpRequest();
var data = null;

xhr.open("GET", "../HTML/Images/Bowl.txt", true);
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        data = xhr.responseText.split('\n');

        for(var i=0; i<data.length; i++){
            document.getElementById('myImage').src='../HTML/Images/'+data;
        }
    }
};
xhr.send();

Answer 2

您需要在txtFile.readyState == 4处理程序中检查txtFile.status == 200和readystatechange，还需要执行txtFile.send()。

您还需要分别引用lines数组中的每个网址。这是一个示例，有两种显示图像的方法：

var txtFile = new XMLHttpRequest();
txtFile.open("GET", "../HTML/Images/Bowl.txt", true);
console.log(txtFile);
txtFile.onreadystatechange = function() {
  if (txtFile.readyState == 4 && txtFile.status == 200) {
    allText = txtFile.responseText;
    lines = txtFile.responseText.split("\n"); // Will separate each line into an array
    if (lines[0] === 'GDogbowl.png'){
      document.getElementById('myImage').src='../HTML/Images/GDogbowl.png'
    }
    else if (lines[0] === 'YDogbowl.png') {
      document.getElementById('myImage').src='../HTML/Images/YDogbowl.png'
    }
    else {
      document.getElementById('myImage').src='../HTML/Images/RDogbowl.png'
    }

    // if you have several images, you need several image elements:
    lines.forEach(function(imgUrl, i) {
      var image = document.createElement("img");
      img.src = imgUrl;
      img.id = "myImage_" + i;
      document.body.appendChild(img);
    });
  }
}
txtFile.send();

Answer 3

split返回一个数组，其中每个元素都包含一行。因此，使用lines [0]访问第一个元素，使用lines [1]访问第二个元素，依此类推。

如果您不关心处理xmlHTTPRequest的状态更改，那么您可以使用onload事件，而不是onstatechange。（我认为所有现代浏览器现在应该支持这个）

正如其他人在他们的答案中提到的那样，如果您只关心第一个项目，并且您确定文件中的名称始终有效，那么您可以连接字符串以实现您的目标，而不是所有的/其他情况。

user_id

切换图像基于外部文本文件内容

3 个答案: