Я новый ученик JavaScript, и я люблю игры. Итак, я решил создать сайт для голосования, который будет принимать голоса посетителей, чтобы посмотреть их любимые игры. Я кодировал вот так.
Самое первое, это HTML часть:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vote For FPS GAMES</title>
<link rel="stylesheet" href="style.css">
<script src="vendor.js" defer></script>
<script src="app.js" defer></script>
</head>
<body>
<div class="card1">
<div class="card-image"></div>
<div class="card-text">
<span class="date">VOTE FOR COD</span>
<h2>GAME-1</h2>
<p>COD is mainly known as CALL OF DUTY. </p>
</div>
<div class="buttonadding">
<button id="vote-btn-cod"> VOTE FOR COD</button>
</div>
<div class="card-stats">
<div class="stat">
<div id="stats-value-cod" class="value" value="0" >0</div>
<div class="type">popularity</div>
</div>
<div class="stat">
<div class="value">2123</div>
<div class="type">views</div>
</div>
<div class="stat">
<div class="value">0</div>
<div class="type">comments</div>
</div>
</div>
</div>
<div class="card2">
<div class="card2-image"></div>
<div class="card2-text">
<span class="date">VOTE FOR APEX-LEGENDS</span>
<h2>GAME-2</h2>
<p>APEX LEGENDS IS A PRODUCT OF EA-SPORTS </p>
</div>
<div class="buttonadding">
<button id="vote-btn-Apex"> VOTE FOR APEX-LEGENDS</button>
</div>
<div class="card2-stats">
<div class="stat">
<div class="value" id="stats-value-apex">0</div>
<div class="type">popularity</div>
</div>
<div class="stat">
<div class="value">0</div>
<div class="type">views</div>
</div>
<div class="stat">
<div class="value">32</div>
<div class="type">comments</div>
</div>
</div>
</div>
<div class="card3">
<div class="card3-image"></div>
<div class="card3-text">
<span class="date">VOTE FOR PUBG</span>
<h2>GAME-3</h2>
<p>PUBG IS A PRODUCT X-BOX </p>
</div>
<div class="buttonadding">
<button id="vote-btn-pubg"> VOTE FOR PUBG</button>
</div>
<div class="card3-stats">
<div class="stat">
<div class="value" id="stats-value-pubg">0</div>
<div class="type">popularity</div>
</div>
<div class="stat">
<div class="value">0</div>
<div class="type">views</div>
</div>
<div class="stat">
<div class="value">32</div>
<div class="type">comments</div>
</div>
</div>
</div>
</body>
</html>
Я разделил JavaScript на два файла:
- vendor. js
- app. js
вот такие:
vendor. js
const voteforcod = document.getElementById('vote-btn-cod');
const voteforapex = document.getElementById('vote-btn-Apex');
const voteforpubg = document.getElementById('vote-btn-pubg');
const popcod = document.getElementById('stats-value-cod');
const popapex = document.getElementById('stats-value-apex');
const poppubg = document.getElementById('stats-value-pubg');
и приложение. js
let increcod=0;
let increapex=0;
let increpubg=0;
function addpopcod() {
alert("button clickd");
popcod.value = popcod.value+1;
console.log(String(popcod.value));
}
function addpopapex() {
popapex.value++;
}
function addpoppubg() {
poppubg.value++;
}
voteforcod.addEventListener('click',addpopcod);
voteforapex.addEventListener('click',addpopapex);
voteforpubg.addEventListener('click',addpoppubg);
Каждый раз, когда я вызываю функцию addpopcod, она должна выдавать предупреждение о нажатии кнопки, но ничего не происходит. Пожалуйста, помогите мне разобраться в этом. Спасибо!