HTML - JavaScript - Добавление и удаление/скрытие элементов

На моем сайте пользователь будет выбирать изображение, которое затем будет вставлено в тег div. Мне это нужно, когда пользователь щелкает изображение, которое было вставлено в div, и оно будет удалено (удалено или скрыто) из div. Я пробовал:HTML - JavaScript - Добавление и удаление/скрытие элементов

document.getElementById("elementId").style.display = "none";

и другие подобные вещи. Я действительно просто не могу заставить это работать, пожалуйста, помогите!

HTML + JavaScript код:

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="test.css"> 
    <script> 
     var cardNumber = 1; 
     var deck = []; 

     var addCard = function(cardName) 
     { 
      if("undefined" != document.getElementById("card" + cardNumber).value) 
      { 
       if(deck.indexOf(cardName) > -1) 
       { 

       } 
       else 
       { 
        if(deck.length != 1) 
        { 
         deck.push(cardName); 
         document.getElementById("card" + cardNumber).innerHTML = '<img id = "' + cardName + '" class = "deckCardSize" onclick = updateCards(' + cardName + ') src = "Images/Cards/' + cardName + '.png">'; 
         cardNumber += 1; 
        } 
        if(deck.length >= 1) 
        { 
         cardNumber = 1; 
        } 
       } 
      } 
     } 
    </script> 
</head> 
<body> 
    <div id = "card1" class = "cards"></div> 
    <div id = "1"> 
     <img class = "cardSize" onclick = "addCard('Archer')" src = "Images/Cards/Archer.png"> 
    </div> 
</body>

CSS код:

.cards 
{ 
    height:150px; 
    width:125px; 
    float:left; 
    margin-left:6.2%; 
    margin-bottom:30px; 
    border:5px solid #ff6666; 
    background-color:#ff6666; 
} 
.cardSize 
{ 
    height:150px; 
    width:125px; 
    float:left; 
    margin-left:7%; 
    margin-top:30px; 
}

источник

2016-07-09 Jordan

Что делает функция 'updateCards'? – Rai

Функция updateCards еще ничего не делает. Предполагается, что карта будет удалена после нажатия на div. – Jordan

Вы можете удалить img по id.

исправить также вопрос с функцией updateCards:

document.getElementById("card" + cardNumber).innerHTML = '<img id = "' + cardName + '" class = "deckCardSize" onclick = "updateCards(\'' + cardName + '\')" src = "' + cardName + '.png">';

Например,

<div id="card1" class="cards"> 
    <img id="Archer" class="deckCardSize" onclick="updateCards('Archer')" src="Archer.png"> 
</div>

Затем просто удалить div с id="Archer":

document.getElementById("Archer").remove();

FYI, я добавил простой updateCards функция это как раз скрывает img вместо удаления его полностью:

var updateCards = function(cardName) { 
     document.getElementById(cardName).style.display = 'none'; 
    }

источник

2016-07-09 21:07:17 Rai

отредактированная версия этого ответа (текущий) не сработала. Я пробовал это раньше. Предыдущий ответ, который вы дали, был правильным. добавив изображение в div в div, удалив изображение по его id. – Jordan

Исправлена ошибка выше. Это должно работать правильно. – Rai

Вам нужно прикрепить прослушиватель событий нажмите на класс, который применяется ко всем вставленных изображений. функция, которую слушатель пожары будут применяться к css.style.display = "none"this

источник

2016-07-09 21:04:17

всякий раз, когда я пытался использовать css.style.display = "none"; это всегда давало мне ошибку: – Jordan

ошибка, которая говорила: Uncaught TypeError: Не могу прочитать свойство 'style' из null – Jordan

Во-первых, удалите все пробелы между атрибутами и его значениями (я имею в виду везде в вашем коде), то есть:

<div id="card1" class="cards"></div><!-- correct --> 
<div id = "card1" class = "cards"></div><!-- incorrect -->

Во-вторых, у вас есть ошибка в коде здесь:

document.getElementById("card" + cardNumber).innerHTML = '<img id = "' + cardName + '" class = "deckCardSize" onclick = updateCards(' + cardName + ') src = "Images/Cards/' + cardName + '.png">';

Вы пропустили двойные кавычки значения onclick «s. Замените его следующим образом:

document.getElementById("card" + cardNumber).innerHTML = '<img id="' + cardName + '" class="deckCardSize" onclick="updateCards(' + cardName + ')" src="Images/Cards/' + cardName + '.png">';

Кроме того, вы должны определить функцию updateCards(name), он может быть пустым, но он должен существует. Если он не существует, любой код javascript перестанет работать после нажатия на это изображение.

В-третьих, <div id = "1"> также имеет значение. id атрибут must начинается с буквы.

здесь работает код:

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="test.css"> 
    <script> 
     var cardNumber = 1; 
     var deck = []; 

     function addCard(cardName) { 
      if ("undefined" != document.getElementById("card" + cardNumber).value) { 
       if (deck.indexOf(cardName) > -1) { 

       } else { 
        if (deck.length != 1) { 
         deck.push(cardName); 
         document.getElementById("card" + cardNumber).innerHTML = '<img id="img' + cardName + '" class="deckCardSize" onclick="updateCards(\'' + cardName + '\')" src="Images/Cards/' + cardName + '.png">'; 
         cardNumber += 1; 
        } 
        if (deck.length >= 1) { 
         cardNumber = 1; 
        } 
       } 
      } 
     } 
     function updateCards(cardName) { 
      //some work 
      document.getElementById("img" + cardName).remove(); 
     } 
    </script> 
</head> 
<body> 
    <div id="card1" class="cards"></div> 
    <div id="main1"> 
     <img class="cardSize" onclick="addCard('Archer')" src="Images/Cards/Archer.png"> 
    </div> 
</body>

Протестировано и работает!

источник

2016-07-09 21:16:12 spirit

1. Пространства в моем коде предназначены для моей читаемости и вообще не влияют на код. 2. что «ошибка», о которой вы говорили, фактически является передаваемой переменной. Мне нужно значение там. но спасибо. 3. updateCards (cardName) - это функция, но я не включил ее в код, потому что в ней ничего нет, потому что именно поэтому я задал этот вопрос, чтобы узнать, что ему вводить. – Jordan

@ Джордан, ваша «удобочитаемость» - это действительно * плохая практика, я настоятельно рекомендую вам больше не использовать ее =). 2. Я говорю не о переменной 'cardName', я говорю о ** атрибутах ** и ее ** значениях **. 'onclick' - это атрибут и его значение (в вашем случае' updateCards ('+ cardName +') ') ** должно быть ** заключено в двойные кавычки. – spirit

переменная, передаваемая в функцию с именем cardName, становится идентификатором img в случае, указанном выше, поэтому его не нужно включать в двойные кавычки. Если бы я это сделал, идентификатор был бы cardName не значением cardName. – Jordan

HTML - JavaScript - Добавление и удаление/скрытие элементов

ответ

Смежные вопросы