Developing a web voting application using JavaScript-JS Tutorial-php.cn

Developing a web voting application using JavaScript

WBOY

Release： 2023-08-10 09:33:10

Original

1115 people have browsed it

Developing a web voting application using JavaScript

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>

Copy after login

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;

Copy after login

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;
}

Copy after login

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++;
  }
}

Copy after login

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);
}

Copy after login

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>

Copy after login

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!