Home >Web Front-end >JS Tutorial >Develop web voting system using JavaScript
Develop web voting system using JavaScript
- PHPzOriginal
- 2023-08-09 13:30:371370browse
Using JavaScript to develop a web voting system
Abstract:
With the rapid development of the Internet, online voting has become a convenient and fast way to collect public input and decision-making. This article will introduce the use of JavaScript to develop a simple web voting system, which enables users to select options and submit votes.
Introduction:
The web voting system is a program that displays multiple options on a web page and allows users to choose. It can be used in many scenarios, such as election voting, product surveys, opinion collection, etc. This article uses JavaScript to develop such a system and provides code examples.
Design idea:
- Create an HTML page that contains the display of options and voting buttons.
- Use JavaScript to write logic code to implement user selection and voting functions.
- Create a function for each option that responds to the click event and updates the voting results after the user selects it.
- Display voting results on the page.
Code example:
HTML part:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页投票系统</title>
</head>
<body>
<h1>请选择你的喜爱选项</h1>
<div id="options">
<div class="option">
<label><input type="radio" name="vote" value="option1">选项1</label>
</div>
<div class="option">
<label><input type="radio" name="vote" value="option2">选项2</label>
</div>
<div class="option">
<label><input type="radio" name="vote" value="option3">选项3</label>
</div>
<div class="option">
<label><input type="radio" name="vote" value="option4">选项4</label>
</div>
</div>
<button onclick="vote()">投票</button>
<h2>投票结果：</h2>
<div id="result">
<p>选项1: <span id="count1">0</span></p>
<p>选项2: <span id="count2">0</span></p>
<p>选项3: <span id="count3">0</span></p>
<p>选项4: <span id="count4">0</span></p>
</div>
<script src="vote.js"></script>
</body>
</html>JavaScript part (vote.js):
function vote() {
var selectedOption = document.querySelector('input[name="vote"]:checked').value;
var countElement = document.getElementById("count" + selectedOption);
var count = parseInt(countElement.innerHTML);
countElement.innerHTML = count + 1;
}Explanation:
## The- #HTML section creates a div containing the options and a radio input for each option.
- vote() function is an event triggered when the voting button is clicked. It first obtains the option value selected by the user and finds the corresponding count element.
- Then, convert the count value from a string to an integer via parseInt() and add 1 to the count value.
- Finally, the updated count value is displayed on the page.
Through the code examples provided in this article, we can develop a simple web voting system using JavaScript. Users can select options and submit votes, and the system will update the voting results in real time. Such a system can be used in various scenarios for convenient and efficient opinion collection and decision-making. With further extensions and improvements, we can also implement more complex voting functions.
The above is the detailed content of Develop web voting system using JavaScript. For more information, please follow other related articles on the PHP Chinese website!