Блог

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

 <input type="button" value="MONKE BUTTON" id="countButton" />
Monke button was pressed - <span id="displayCount">0</span> - times. 
</div>

<script>
var count = 0;
var countButton = document.getElementById("countButton");
var displayCount = document.getElementById("displayCount");
countButton.onclick = function(){
  count  ;
  displayCount.innerHTML = count;

}

const button = document.querySelector('input[type="button"]');
button.addEventListener('click', event => {
    

   const othermonke = document.createElement("img");
   othermonke.src = "./monke.jpg";
   othermonke.width = "200";
   othermonke.height = "200";
   othermonke.alt = "alttext";

   button.parentElement.appendChild(othermonke);
});
    </script>
 

Вместо добавления <img> элементов button.parentElement , соответствующих родительскому <div> контейнеру, просто создайте другой контейнер для добавления сгенерированных изображений, чтобы они всегда появлялись под кнопкой. Когда вы используете appendChild родительский элемент buttons, он добавляет ваши <img> » s » в конец родительского контейнера. Что делает <input> элемент и текст смежными со всеми изображениями в HTML,

 <div>
  <input type="button" value="MONKE BUTTON" id="countButton" />
  Monke button was pressed - <span id="displayCount">0</span> - times.
  <img src="./monke.jpg" width="200" height="200" alt="alttext">
  <img src="./monke.jpg" width="200" height="200" alt="alttext">
  ..
</div>
 

Поэтому, когда создается новое изображение, оно помещается справа от кнопки и текста в одной строке. Если ширина окна просмотра мала, изображения будут перенесены на следующую строку под кнопкой, когда ширина окна просмотра большая, изображения будут отображаться справа от кнопки/текста, заполняющего страницу, пока содержимое не достигнет конца и не перейдет на следующую строку. Чтобы упростить задачу, просто создайте новый элемент <div class="images"> в родительском контейнере для добавления сгенерированных изображений.

Таким образом, вы можете создать новый элемент уровня блока, который всегда начинается с новой строки и занимает всю доступную ширину (растягивается влево и вправо, насколько это возможно).

 var count = 0;
var countButton = document.getElementById("countButton");
var displayCount = document.getElementById("displayCount");
countButton.onclick = function(){
  count  ;
  displayCount.innerHTML = count;

}

const button = document.querySelector('input[type="button"]');
button.addEventListener('click', event => {
    
   const images = document.querySelector(".images");
   const othermonke = document.createElement("img");
   othermonke.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/microsoft/74/monkey_1f412.png";
   othermonke.width = "200";
   othermonke.height = "200";
   othermonke.alt = "alttext";

   images.appendChild(othermonke);
}); 

 .images {
  margin: 1rem auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.images img {
  max-width: 100%;
  width: auto;
  height: auto;
  margin: .5rem 0;
} 

 <div class="parent">
  <input type="button" value="MONKE BUTTON" id="countButton" />
  Monke button was pressed - <span id="displayCount">0</span> - times.
  <div class="images"></div>
</div> 

Если ваша проблема связана с выравниванием, то вы можете применить vertical-align:top к своей кнопке и тексту, как показано ниже. Так что он всегда будет выровнен сверху.

 var count = 0;
var countButton = document.getElementById("countButton");
var displayCount = document.getElementById("displayCount");
countButton.onclick = function(){
  count  ;
  displayCount.innerHTML = count;

}

const button = document.querySelector('input[type="button"]');
button.addEventListener('click', event => {
    

   const othermonke = document.createElement("img");
   othermonke.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/microsoft/74/monkey_1f412.png";
   othermonke.width = "50";
   othermonke.height = "50";
   othermonke.alt = "alttext";

   button.parentElement.appendChild(othermonke);
}); 

 #countButton, #contenSpan {
vertical-align:top;
} 

 <div>
<input type="button" value="MONKE BUTTON" id="countButton" />
<span id="contenSpan">Monke button was pressed - <span id="displayCount">0</span> - times. </span>
</div>