Question

我是Java的新手，而且，正如我所料，我在使用Java时很困难。我不知道我在做什么错... 也许我的CDN声明是无序的？我检查了我的js语法很多次，我只是找不到问题... 请，有人可以帮忙吗？

任务：仅使用Java脚本更改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上将属性'src'设置为null。

那个怪胎按钮什么也没做，只会让我哭泣...

感谢您的宝贵时间...

Answer 1

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

Answer 2

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

document.getElementById（“ ble”）。src

此语句运行时，因为id为bla，所以document.getElementById（“ ble”）将返回null。因此，错误为“ src为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>

也不需要关闭图像标签。这是一个单例标签，即不需要结束标签有效的标签。

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

2 个答案: