Невозможно изменить атрибуты id или src внутри тега img, используя только Javascript - PullRequest
Новая
       1

Невозможно изменить атрибуты id или src внутри тега img, используя только Javascript

0 голосов
/ 17 декабря 2018

Я новичок в Javascript и, как и ожидалось, мне тяжело с ним.Я не знаю, что я делаю неправильно ... Может быть, мои декларации CDN являются беспорядочными?Я много раз проверял свой синтаксис js, просто не могу найти проблему ... Пожалуйста, кто-нибудь может помочь?

Миссия: изменить атрибут img src и id (HTML5), используя только Javascript.

Мой 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>

.,.

Ошибка консоли: Uncaught TypeError: Невозможно установить для свойства 'src' значение null в imgChanger.

И эта чертова кнопка только и заставляет меня плакать ...

Спасибо за ваше время, чел ...

Ответы [ 2 ]

0 голосов
/ 17 декабря 2018

Блок 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>

Также нет необходимости иметь закрывающий тег изображения.Это одноэлементный тег, т. Е. Тег, для которого не требуется действительный закрывающий тег.

0 голосов
/ 17 декабря 2018

b = document.getElementById("ble"); вернет ноль и не приведет к сбою программы, пока вы не попытаетесь что-то установить для него, так как кажется, что у вас нет объекта с идентификатором в HTML.Кроме того, устройство смены изображений не будет работать при нажатии и работает только при нагрузке.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...