Форум

GeorgieDev · #1 (**permalink**) 02.11.2020, 09:47

Добрый день, мне надо сделать так, чтобы после 4-5 кликов блок удалялся, а затем создавался новый такой же блок, и на него срабатывало свойство .onclick()

Код:

* {
    margin: 0;
}
body{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    display: block;
}
.center-box{
    position: relative;
    height: 8vmax;
    width: 8vmax;
}

let StoneWidth = 7, StoneHeight = 7;
// func
function createNewStone(){
    let center_block = document.createElement('img');
    center_block.className = "center-box";
    center_block.id = "centerBox"
    center_block.setAttribute("src","./imgs/stone.png");
    let box = document.querySelector('.center-box');
    document.body.append(center_block);
}
createNewStone();
var center_main_block = document.getElementById("centerBox");
center_main_block.onclick = function () {
    center_main_block.setAttribute("style","width:" + StoneWidth-- + "vmax");
    center_main_block.style.height = StoneHeight-- + "vmax"
    if(center_main_block.style.width <= 3 + "vmax"){
        StoneHeight = 7;
        StoneWidth = 7;
        center_main_block.remove()
        createNewStone()
    }
}

Помогите)

рони · #2 (**permalink**) 02.11.2020, 10:06

GeorgieDev,

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
* {
    margin: 0;
}
body{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    display: block;
}
.center-box{
    position: relative;
    height: 8vmax;
    width: 8vmax;
}
  </style>
  <script>
document.addEventListener( "DOMContentLoaded" , function() {
let StoneWidth = 7, StoneHeight = 7;
// func
function createNewStone(){
    let center_block = document.createElement('img');
    center_block.className = "center-box";
    center_block.id = "centerBox"
    center_block.setAttribute("src","https://javascript.ru/forum/images/smilies/smile.gif");
    document.body.append(center_block);
    center_block.onclick = function () {
    center_block.setAttribute("style","width:" + StoneWidth-- + "vmax");
    center_block.style.height = StoneHeight-- + "vmax"
    if(StoneWidth <= 3){
        StoneHeight = 7;
        StoneWidth = 7;
        center_block.remove()
        createNewStone()
    }
}
}
createNewStone();
  });
  </script>
</head>
<body>
</body>
</html>

GeorgieDev · #3 (**permalink**) 02.11.2020, 10:35

Спасибо, как всегда выручаете

Форум

Справочник

Discord чат

Курсы javascript