Скрыть картинку по нажатию. (js)

Question

На страничке в случайном месте появляется картинка, а при нажатии на нее, должна исчезать. С появлением все работает нормально, но при клике картинка не исчезает. То есть функция MF не работает. Помогите понять, как ее переписать. /Совсем новичок в js/

function MF(){
  $("#sweet").click(function(){
    $("#sweet").style.display="none"
  })
};


(function makeDiv(){

  var times = Math.floor(Math.random() * 2);

  if (times == 0)
  {

    var sweettype = Math.floor(Math.random() * 2);

    if(sweettype == 0) 
    {
      var sweetcolor = Math.floor(Math.random() * 2);
      
      if (sweetcolor == 1){  document.getElementById('sweet').src='http://forumstatic.ru/files/0012/bb/27/84477.png';
      }
    }
    
    if (sweettype == 1)
    {
      var sweetcolor = Math.floor(Math.random() * 2);
      
      if (sweetcolor == 0){  document.getElementById('sweet').src='http://forumstatic.ru/files/0012/bb/27/56289.png';
      }
      
      if (sweetcolor == 1){  document.getElementById('sweet').src='http://forumstatic.ru/files/0012/bb/27/31053.png';
      }
    }

    var posx = (Math.random() * ($(document).width() - 60)).toFixed();
    var posy = (Math.random() * ($(document).height() - 300)).toFixed();

    $newdiv=$('#sweeties'),

      $newdiv.css({
        'position':'absolute',
        'left':posx+'px',
        'top':posy+'px',
        'display': 'inline'
      });
  }
})();

<div style="height:300px; 
width:60px;
border:none; 
position:fixed;
z-index:100;
overflow-y:auto;
display: none;"
id="sweeties">

<img src="http://forumstatic.ru/files/0012/bb/27/64656.png" id="sweet"/>

</div>

Answer 1

Во-первых, функция MF вешает обработчик клика на картинку и эту функцию надо вызывать, как вызывается функция makeDiv. Во-вторых, нельзя писать $("#sweet").style.display="none", надо $("#sweet").hide();.

(function MF(){
$("#sweet").click(function(){
    $("#sweet").hide();
})
})();

На будущее - будет лучше, если сначала воспользоваться либо пошаговым исполнением кода, либо втыкать в код console.log('Какое-то отладочное сообщение, которое позволит понять, вызывается функция или нет'). В консоли браузера все читать потом (в хроме это Ctrl+Shift+I, вкладка "консоль"), в консоли же и ошибки печатаются, если что-то не так, это критически важно читать. А также очень внимательно читать документацию в первую очередь.

Answer 2

Нужно использовать $(this).hide();

$("#sweet").click(function () {
  $(this).hide();
});

Рабочий код: https://codesandbox.io/s/1184630-o0xgf

Демо: https://o0xgf.csb.app/

БЛОГ НА HUSL

Скрыть картинку по нажатию. (js)

Ответы (2 шт):