Как использовать JavaScript добавить изображение со ссылкой в ​​конкретном проводнике? - PullRequest
Новая
       35

Как использовать JavaScript добавить изображение со ссылкой в ​​конкретном проводнике?

1 голос
/ 10 октября 2019

Я хочу добавить изображение со ссылкой, только когда я в Safari, и это мой HTML и JS. Я новичок в JavaScript. 

var isSafari = navigator.userAgent.match("Safari") ;
    
if (isSafari) {
    alert('You are using Safari or Google');
        
    var image = document.createElement('img');
    image.setAttribute('src','images/ar_but.png'); 

    document.getElementsByClassName('gallery').getElementsByClassName('thumbnail').getElementById('AddImageInhere').appendChild(image); 
}
<!-- Main Container -->
  <div class="container">
    <div class="gallery">
      <div class="thumbnail">
        <a href="#"><img src="images/icon01.jpg" alt="" width="2000" class="cards" /></a>
        <h4>TITLE</h4>
        <a href="sofa.usdz" rel="ar" id="AddImageInhere"> !!!</a>
        <p class="tag">HTML, CSS, JS, WordPress</p>
        <p class="text_column">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>  
    </div> 
  </div> 
<!-- Main Container Ends -->

Но этот код не работает. Я хочу добавить изображение как прямо на !!! вот результат: один два

Появляется предупреждение. Но на !!! ,Там нет изображения.

Я использую скобки. Спасибо за чтение.

edit: Вот ошибка. 

ERROR: 'navigator' is not defined. [no-undef]   var isSafari = navigator.userAgent.match("Safari");
ERROR: 'alert' is not defined. [no-undef]   alert('You are using Safari or Google');
ERROR: 'document' is not defined. [no-undef]    var image = document.createElement('img');
ERROR: 'document' is not defined. [no-undef]    document.getElementById('AddImageInhere').appendChild(image);

Ответы [ 2 ]

1 голос
/ 10 октября 2019

Просто удалите первые 2 getElementsByClassName() функции. Вы не можете связать их, так как они возвращают список узлов. У ноделистов нет функции getElementsByClassName().

См. https://developer.mozilla.org/en-US/docs/Web/API/NodeList

var isSafari = navigator.userAgent.match("Safari");
if (isSafari) {
  alert('You are using Safari or Google');
  var image = document.createElement('img');
  image.setAttribute('src', 'https://dummyimage.com/600x400/000/fff');
  document.getElementById('AddImageInhere').appendChild(image);
}
<!-- Main Container -->
<div class="container">
  <div class="gallery">
    <div class="thumbnail">
      <a href="#"><img src="images/icon01.jpg" alt="" width="2000" class="cards" /></a>
      <h4>TITLE</h4>
      <a href="sofa.usdz" rel="ar" id="AddImageInhere"> !!!</a>
      <p class="tag">HTML, CSS, JS, WordPress</p>
      <p class="text_column">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>/12918160/kak-ispolzovat-javascript-dobavit-izobrazhenie-so-ssylkoi-v-konkretnom-provodnike
  </div>
</div>

Для нескольких изображений я предлагаю использовать QuerySelector all и создавать новое изображение для каждого добавления. 

var isSafari = navigator.userAgent.match("Safari");
if (isSafari) {
  alert('You are using Safari or Google');
  
  document.querySelectorAll('.AddImageInhere').forEach((el) => { 
    el.appendChild(getImage()); 
  });
}

function getImage() {
  var image = document.createElement('img');
  image.setAttribute('src', 'https://dummyimage.com/600x400/000/fff');
  return image;
}
<!-- Main Container -->
<div class="container">
  <div class="gallery">
    <div class="thumbnail">
      <a href="#"><img src="images/icon01.jpg" alt="" width="2000" class="cards" /></a>
      <h4>TITLE</h4>
      <a href="sofa.usdz" rel="ar" class="AddImageInhere"> !!!</a>
      <a href="sofa.usdz" rel="ar" class="AddImageInhere"> !!!</a>
      <a href="sofa.usdz" rel="ar" class="AddImageInhere"> !!!</a>
      <a href="sofa.usdz" rel="ar" class="AddImageInhere"> !!!</a>
      <p class="tag">HTML, CSS, JS, WordPress</p>
      <p class="text_column">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>/12918160/kak-ispolzovat-javascript-dobavit-izobrazhenie-so-ssylkoi-v-konkretnom-provodnike
  </div>
</div>
0 голосов
/ 10 октября 2019

Функция getElementsByClassName () возвращает коллекцию. Вы не можете вызвать следующий getElementsByClassName () для коллекции. Просто используйте querySelectorAll вместо этой функции.

...