кнопка показывая изображение только один раз?

Question

Быстрый вопрос,

Я полный JS noob, поэтому мне трудно найти правильный ответ в Интернете. Поэтому я решил, что задаю здесь свой вопрос.

Я написал эти две функции.

<script language="javascript" type="text/javascript"> 

function test() { 
show_image("nummer/test.jpg", 120,160, "Firstname Lastname"); 
show_image("nummer/test2.jpg", 120,160, "Firstname2 Lastname2"); 
} 

function show_image(src, width, height, alt) { 
    var img = document.createElement("img"); 
    img.src = src; 
    img.width = width; 
    img.height = height; 
    img.alt = alt; 
    document.body.appendChild(img); 
} 

//edited piece of code: 

function removeImages(){ 
      var images = document.getElementsByTagName("img"); 
      for (index = images.length - 1; index >= 0; index--) { 
       images[index].parentNode.removeChild(images[index]); 
      } 
     } 

</script> 

<button onclick="test();">test</button> 

Это изображение прекрасно отображает изображения, но при нажатии кнопки он продолжает генерировать изображения. Поэтому, если вы продолжаете нажимать кнопку, моя страница заполняется теми же изображениями.

Мне нужен способ ограничить это. Я хочу, чтобы изображение снова исчезло, когда кнопка нажата во второй раз или когда нажата другая кнопка.

Спасибо!

EDIT:

нашел решение моей исходной задачи, блок кода теперь редактируется с дополнительной функцией для замены изображения. Я знаю, что мой код действительно не эффективен, но он работает.

Answer 1

Отредактировано после разъяснения комментария ФП. Подумайте о том, что делает ваша логика show_image. Вы являетесь , создавая изображение и прикрепляя его каждый раз, когда нажимается ваша кнопка.

Теперь, что вы действительно хотите сделать? Ответьте, и у вас есть свой ответ. Давайте создадим историю: Каждый раз, когда я нажимаю кнопку, я хочу добавить два изображения, если они не на экране, или удалить их, если они есть.

Существует множество способов сделать это. Вы можете использовать CSS, если хотите просто визуально скрывать их, вы можете уничтожать и создавать новые изображения, вы можете прикреплять/отсоединять одни и те же изображения и т. Д. Но одно остается неизменным: вам нужно отслеживать, будут ли изображения вы создаете, уже созданы. (Это также имеет несколько способов: вы можете запросить dom, вы можете хранить ссылки на элементы, вы можете использовать логический переключатель и т. Д.).

Вот живой пример, который использует исходный код в качестве основы, но отслеживает ссылки изображения мы создаем только один раз и прикрепляет или удаляет их из йота с каждым нажатием кнопки:

// Define our images in the outer closure. 
 
var img1, img2; 
 

 
// Handle the button click 
 
function toggleImages() { 
 
    // If we haven't created our images, create and store them in 
 
    // our variables. 
 
    if (!img1) { 
 
    img1 = create_image('http://lorempixel.com/120/160?a', 120, 160, "Firstname Lastname"); 
 
    } 
 
    if (!img2) { 
 
    img2 = create_image('http://lorempixel.com/120/160?b', 120, 160, "Firstname Lastname"); 
 
    } 
 
    // Toggle our images 
 
    toggle_image(img1); 
 
    toggle_image(img2); 
 
} 
 

 
function create_image(src, width, height, alt) { 
 
    var img = document.createElement('img'); 
 
    img.src = src; 
 
    img.width = width; 
 
    img.height = height; 
 
    img.alt = alt; 
 
    return img; 
 
} 
 

 
function toggle_image(img) { 
 
    var parent = img.parentElement; 
 
    // If our images are not attached to a parent, attach them. 
 
    // Otherwise, remove them. 
 
    if (!parent) { 
 
    document.body.appendChild(img); 
 
    } else { 
 
    parent.removeChild(img); 
 
    } 
 
}

<button onclick="toggleImages()">Toggle some images!</button><br><br>

Answer 2

у меня не было времени, чтобы проверить, запустить его, но я надеюсь, что решает проблему:

Примечание Я выбирающий IMG, который имеет был создано и удалить его перед добавлением еще один

function test() { 
var x = document.querySelector('img'); 
var body = document.querySelector('body'); 
if(x){ // if an img has been found do that 
    body.removeChild(x); 
} 
show_image("nummer/test.jpg", 120,160, "Firstname Lastname"); 
show_image("nummer/test2.jpg", 120,160, "Firstname2 Lastname2"); 
} 

function show_image(src, width, height, alt) { 

    var img = document.createElement("img"); 
    img.src = src; 
    img.width = width; 
    img.height = height; 
    img.alt = alt; 
    document.body.appendChild(img); 
} 

Answer 3

Потому что вы говорите «когда другая кнопка нажата», я предполагаю, что вы пытаетесь сделать это так, есть несколько кнопок, каждая из которых загрузки другого изображения.

Если это действительно так, то я бы с следующим подходом:

// Array of image objects to keep things neat 
var images = [ 
    { "src": "http://placehold.it/120x160", "width": "120", "height": "160", "alt": "Test Image 1" }, 
    { "src": "http://placehold.it/120x161", "width": "120", "height": "160", "alt": "Test Image 2" } 
]; 
function show_image(image) { 
    // Ensure provided index is in array 
    if (image < images.length) { 
     // Remove this image if already displayed 
     if (document.getElementsByClassName("imageNo" + image)[0] !== undefined) 
      document.getElementsByClassName("imageNo" + image)[0].outerHTML = ""; 
     else { 
      // Remove other images if displayed 
      if (document.getElementById("currentImage") !== null) 
       document.getElementById("currentImage").outerHTML = ""; 
      var img = document.createElement("img"); 
      var cur = images[image]; 
      img.id = "currentImage"; 
      img.className = "imageNo" + image; 
      img.src = cur.src; 
      img.width = cur.width; 
      img.height = cur.height; 
      img.alt = cur.alt; 
      document.body.appendChild(img); 
     } 
    } 
    else 
     console.log('No image exists for this index'); 
} 
// Add functionality to buttons 
document.getElementById("imageButton1").onclick = function() {show_image(0);} 
document.getElementById("imageButton2").onclick = function() {show_image(1);} 

Fiddle

Если у вас есть одна кнопки, вы хотите, чтобы перебрать все изображения, вы могли бы использовать тот же подход, но изменить show_image к

var currentImage = 0; 
function show_image() { 
    // Remove other images if displayed 
    if (document.getElementById("currentImage") !== null) 
     document.getElementById("currentImage").outerHTML = ""; 
    var img = document.createElement("img"); 
    var cur = images[currentImage++ % images.length]; 
    img.id = "currentImage"; 
    img.src = cur.src; 
    img.width = cur.width; 
    img.height = cur.height; 
    img.alt = cur.alt; 
    document.body.appendChild(img); 
} 
function hide_image() { 
    // Remove other images if displayed 
    if (document.getElementById("currentImage") !== null) 
     document.getElementById("currentImage").outerHTML = ""; 
    currentImage = 0; 
} 
// Add functionality to buttons 
document.getElementById("imageButton1").onclick = function() {show_image();} 
document.getElementById("imageButton2").onclick = function() {hide_image();} 

Fiddle

Надеюсь, что одно из них - то, что вы ищете.

EDIT:

Для многомерного массива вам нужно сделать следующее:

// Array of image objects to keep things neat 
var images = [ 
    //group 1 
    [ 
     { "src": "http://placehold.it/120x160", "width": "120", "height": "160", "alt": "Test Image 1" }, 
     { "src": "http://placehold.it/120x161", "width": "120", "height": "160", "alt": "Test Image 2" } 
    ], 
    //group 2 
    [ 
     { "src": "http://placehold.it/120x160", "width": "120", "height": "160", "alt": "Test Image 3" }, 
     { "src": "http://placehold.it/120x161", "width": "120", "height": "160", "alt": "Test Image 4" } 
    ], 
]; 

Очевидно, что если вы собираетесь иметь 800 изображений, это будет немного больше утомительный. Все ли изображения будут одинаковой ширины/высоты? Если они, я бы принять удар по SEO, чтобы пойти на что-то вроде этого:

var imageUrls = [ 
    "http://placehold.it/120x160", 
    "http://placehold.it/120x160", 
    //etc. 
]; 
    // Change this as desired 
var itemsPerGroup = 40; 
// Returns how many times imageUrls length can be divided into 40 for group count 
var images = new Array(Math.floor(imageUrls.length/itemsPerGroup) + 1); 
// Initializes child arrays, ensuring last is only as long as it needs to be 
for (var i=0; i<images.length; i++) 
    images[i] = (i !== images.length - 1) ? new Array(itemsPerGroup) : new Array(images.length % itemsPerGroup); 

// Fill arrays 
for (var i=0; i<imageUrls.length; i++) { 
    // current group 
    var group = Math.floor(i/itemsPerGroup); 
    // dividend is item number 
    var item = i%itemsPerGroup; 
    images[group][item] = { 
     "src": imageUrls[i], 
     "alt": "Group " + group + ", Image " + item, 
     "width": "120", 
     "height": "160" 
    }; 
} 

С помощью этого вы будете звонить изображения как так

// Array of currentImages 
var currentImages = new Array(images.length); 
// Initialize 
for (var i=0; i<currentImages.length; i++) 
    currentImages[i] = 0; 

function show_image(group) { 
    var imageID = "currentImage" + group; 
    var imageContainer = "imageGroup" + group + "Container"; 
    // Remove other image in group if displayed 
    if (document.getElementById(imageID) !== null) 
     document.getElementById(imageID).outerHTML = ""; 
    var img = document.createElement("img"); 
    var cur = images[group][currentImages[group]++%images[group].length]; 
    img.id = "currentImage" + group; 
    img.src = cur.src; 
    img.width = cur.width; 
    img.height = cur.height; 
    img.alt = cur.alt; 
    document.getElementById(imageContainer).appendChild(img); 
} 
function hide_image(group) { 
    // Remove image in group if displayed 
    var imageID = "currentImage" + group; 
    if (document.getElementById(imageID) !== null) 
     document.getElementById(imageID).outerHTML = ""; 
    // Reset currentImage 
    currentImages[group] = 0; 
} 

And of course, a Fiddle showing it in action.