Home > Article > Web Front-end > Develop web voting system using JavaScript
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:
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:
## TheThrough 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!