Question

无法仅使用 Javascript 更改 img 标签内的 id 或 src 属性

2018-12-17

257

javascript html

我是 Javascript 的新手，正如所料，我遇到了困难。我不知道我做错了什么…… 也许我的 CDN 声明是无序的？我检查了我的 js 语法很多次，就是找不到问题所在…… 请问有人能帮忙吗？

任务：仅使用 Javascript 更改 img src 和 id 属性（HTML5）。

我的 HTML：

<head>
<!--CDN-->
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" ></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" ></script>
<script src="https://unpkg.com/tooltip.js"></script>

<script>
    window.onload = function imgChanger() {
        let bonanza = 0;
        let a;
        let b;
        try {
            a = document.getElementById("bla");
            bonanza = 1;
        } catch (error) {
            console.log("This elemente with id=bla doesn't exists.");
        }
        try {
            b = document.getElementById("ble");
            bonanza = 2;
        } catch (error) {
            console.log("This elemente with id=ble doesn't exists.");
        }
        if (bonanza == 1) {
            document.getElementById("bla").src = "CORRECT PATH TO IMG 01";
            document.getElementById("bla").id = "ble";
        }
        if (bonanza == 2) {
            document.getElementById("ble").src = "CORRECT PATH TO IMG 02";
            document.getElementById("ble").id = "bla";
        }
    }
</script>

. . .

<body>
    <button id="xBtnOne" onclick="imgChanger()">
        <img id="bla" src="CORRECT PATH TO IMG 01"></img>
    </button>
</body>

. . .

控制台错误：未捕获的 TypeError：无法在 imgChanger 处设置 null 的属性“src”。

而且，那个该死的按钮什么也没做，只是让我哭了……

谢谢大家的时间……

Answer 1

代码中的 try/catch 块永远不会抛出错误。因此 bonanza 的值将始终为 2。因此，当

document.getElementById("ble").src

运行此语句时，document.getElementById("ble") 将返回 null，因为 id 为 bla。因此出现错误“src of null”。

您可以尝试以下操作：

<html>

<head>
  <!--CDN-->
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <script src="https://unpkg.com/tooltip.js"></script>

  <script>
    window.onload = function imgChanger() {
      let bonanza = 0;
      let a;
      let b;
      a = document.getElementById("bla");
      b = document.getElementById("ble");
      bonanza = a ? 1 : 2;
      if (bonanza == 1) {
        document.getElementById("bla").src = "CORRECT PATH TO IMG 01";
        document.getElementById("bla").id = "ble";
      }
      if (bonanza == 2) {
        document.getElementById("ble").src = "CORRECT PATH TO IMG 02";
        document.getElementById("ble").id = "bla";
      }
    }
  </script>
</head>

<body>
  <button id="xBtnOne" onclick="imgChanger()">
        <img id="bla" src="CORRECT PATH TO IMG 01">
    </button>
</body>

</html>

此外，没有必要使用结束图像标签。它是一个单例标签，即不需要结束标签即可有效的标签。

Answer 2

b = document.getElementById("ble"); 将返回 null 并且不会使程序崩溃，直到您尝试为其设置某些内容，因为 HTML 中似乎没有带有 id ble 的对象。此外，图像转换器在单击时不起作用，仅在加载时运行。