<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<div class="amount400" tabindex="1" onclick="amount = 800; amountchange()">
<h3>400</h3>
</div>
<div class="preview">
<h3 id="rublikspreview">Не выбрано</h3>
</div>
</body>
</html>.amount400 {
width: 200px;
height: 210px;
margin-top: -210px;
margin-left: 320px;
background-image: url("icons/Icon.png");
background-repeat: no-repeat;
background-size: 175px 175px;
background-position-x: center;
background-position-y: top;
display: flex;
align-items: flex-end;
justify-content: center;
background-color: #696969;
box-shadow: 5px 5px 10px 2px #222;
border-radius: 10px;
cursor: pointer;
transition: 0.35s;
}
.rubliks400 h3 {
font-size: 22px;
font-family: "Arial Black";
color: #ffbb00;
}
.preview {
width: 200px;
height: 210px;
margin-left: 75px;
margin-top: 20px;
background-image: url("icons/NotSelected.png");
background-repeat: no-repeat;
background-size: 175px 175px;
background-position-x: center;
background-position-y: top;
display: flex;
align-items: flex-end;
justify-content: center;
background-color: #696969;
border-radius: 10px;
}
.preview h3 {
font-size: 22px;
font-family: "Arial Black";
color: #f14141;
}let buy_preview = document.querySelector("#rublikspreview");
function amountchange() {
buy_preview.style.backgroundImage = "url('icons/Icon.png')";
}