Home > Article > Web Front-end > Developing a web voting application using JavaScript

Developing a web voting application using JavaScript

WBOYOriginal: 2023-08-10 09:33:101135browse

Using JavaScript to develop web voting applications

With the development of the Internet, online voting has become a common way to collect user opinions and feedback. In order to facilitate users to participate in voting activities, it is very necessary to develop a simple web voting application. This article will introduce how to use JavaScript to develop a web voting application, and attach corresponding code examples.

Preparation

First, we need to add a voting area and some option buttons to the web page, where users can choose their favorite options to vote. The code is as follows:

<!DOCTYPE html>
<html>
<head>
  <title>网页投票应用</title>
</head>
<body>
  <h1>请选择你喜欢的颜色：</h1>
  <div>
    <input type="radio" name="vote" value="红色">红色<br>
    <input type="radio" name="vote" value="蓝色">蓝色<br>
    <input type="radio" name="vote" value="绿色">绿色<br>
    <input type="button" value="投票" onclick="vote()">
  </div>
</body>
</html>

JavaScript to implement the voting function

Next, we use JavaScript to write code to implement the voting function. First, we need to define a global variable to store the number of votes for each option. The code is as follows:

// 初始化得票数为0
var redVotes = 0;
var blueVotes = 0;
var greenVotes = 0;

Then, we need to write a function to handle the user’s voting behavior. This function will be called when the user clicks on the voting button. First, we need to get the options selected by the user. The code is as follows:

function vote() {
  var selectedOption = document.querySelector('input[name="vote"]:checked').value;
}

Next, we need to increase the number of votes for the corresponding option based on the user's choice. The code is as follows:

function vote() {
  var selectedOption = document.querySelector('input[name="vote"]:checked').value;

  if (selectedOption === "红色") {
    redVotes++;
  } else if (selectedOption === "蓝色") {
    blueVotes++;
  } else if (selectedOption === "绿色") {
    greenVotes++;
  }
}

Finally, we can output the number of votes for each option on the console for reference. The code is as follows:

function vote() {
  var selectedOption = document.querySelector('input[name="vote"]:checked').value;

  if (selectedOption === "红色") {
    redVotes++;
  } else if (selectedOption === "蓝色") {
    blueVotes++;
  } else if (selectedOption === "绿色") {
    greenVotes++;
  }

  console.log("红色得票数：" + redVotes);
  console.log("蓝色得票数：" + blueVotes);
  console.log("绿色得票数：" + greenVotes);
}

Complete web voting application

Finally, we integrate the above codes together to form a complete web voting application. Users can click the voting button to select their favorite color and view the number of votes for each option on the console. The code is as follows:

<!DOCTYPE html>
<html>
<head>
  <title>网页投票应用</title>
</head>
<body>
  <h1>请选择你喜欢的颜色：</h1>
  <div>
    <input type="radio" name="vote" value="红色">红色<br>
    <input type="radio" name="vote" value="蓝色">蓝色<br>
    <input type="radio" name="vote" value="绿色">绿色<br>
    <input type="button" value="投票" onclick="vote()">
  </div>

  <script>
    // 初始化得票数为0
    var redVotes = 0;
    var blueVotes = 0;
    var greenVotes = 0;

    function vote() {
      var selectedOption = document.querySelector('input[name="vote"]:checked').value;

      if (selectedOption === "红色") {
        redVotes++;
      } else if (selectedOption === "蓝色") {
        blueVotes++;
      } else if (selectedOption === "绿色") {
        greenVotes++;
      }

      console.log("红色得票数：" + redVotes);
      console.log("蓝色得票数：" + blueVotes);
      console.log("绿色得票数：" + greenVotes);
    }
  </script>
</body>
</html>

The above is the method and sample code for developing web voting applications using JavaScript. By studying this article, you will be able to understand how to add voting options to web pages and use JavaScript to write corresponding logic to handle users' voting behavior. Hope this article helps you!

The above is the detailed content of Developing a web voting application using JavaScript. For more information, please follow other related articles on the PHP Chinese website!

JavaScript 全局变量

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Using JavaScript to develop web game rankingsNext article：Using JavaScript to develop web game rankings

See more

Developing a web voting application using JavaScript

Related articles