Есть много кнопок, надо определить нужную. То есть при нажатие данной кнопки появлялся голос для этой кнопки.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="javascript.js"></script>
</head>
<body>
<div class="pole">
<div class="vote">
<p>Vote</p>
</div>
<span class="count">0</span>
</div>
<div class="pole">
<div class="vote">
<p>Vote</p>
</div>
<span class="count">0</span>
</div>
<div class="pole">
<div class="vote">
<p>Vote</p>
</div>
<span class="count">0</span>
</div>
<div class="pole">
<div class="vote">
<p>Vote</p>
</div>
<span class="count">0</span>
</div>
</body>
</html>
window.onload = function() {
var btnVote = document.querySelector('.vote');
var vote = document.querySelectorAll('.count');
var pole = document.querySelectorAll('.pole');
var arr = [];
if(window.XMLHttpRequest) {
var request = new XMLHttpRequest();
} else {
var request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.open('GET', 'file.txt', true);
request.onreadystatechange = function() {
if(request.status === 200 && request.readyState === 4) {
//...
} else {
vote.innerHTML = "Error AJAX";
}
};
request.send(null);
}
*{
margin: 0px;
padding: 0px;
}
.pole {
width: 200px;
height: 50px;
float: left;
margin: 20px;
font: 20px Arial,sans-serif;
}
.pole::after {
content: '';
display: block;
clear: both;
}
.vote {
width: 150px;
height: 50px;
background: #a88d8d;
float: left;
text-align: center;
cursor: pointer;
line-height: 50px;
}
.voted {
width: 150px;
height: 50px;
background: #f70000;
float: left;
text-align: center;
cursor: pointer;
line-height: 50px;
}
.count {
width: 50px;
margin-left: 150px;
height: 50px;
display: block;
background: #caddbb;
text-align: center;
line-height: 50px;
}
