Question

我有一些非常基本的假设的javascript，用于显示点击链接的次数，并在第5次点击时重定向到新页面。它看起来像这样：

＆＃13;

function counter() {
  var counterCount = 0;
  var amount = document.getElementById("amount");
  counterCount += 1;
  amount.innerHTML = counterCount;
  if (counter === 5) {
  	document.location.replace('https://developer.mozilla.org');
  }
}

＆＃13;

<a onclick="counter()" href="#">I need to be clicked 5 times before I redirect</a>

<p id="amount"></p>

＆＃13;

我在这里做错了什么？

为什么我的柜台不超过1？
为什么不重新直接工作？

Answer 1

这是因为每次单击时，都会将变量重新初始化为0。

要解决此问题，只需将变量移到外面即可。

var counterCount = 0;

function counter() {
    var amount = document.getElementById("amount");
    counterCount += 1;
    amount.innerHTML = counterCount;
    if (counterCount === 5) {
        document.location.replace('https://developer.mozilla.org');
    }
}

Answer 2

每当您致电counter()时，您都会说明var counterCount = 0;

您可以修复此问题，将变量置于函数之外：

var counterCount = 0;

function counter() {
    var amount = document.getElementById("amount");
    counterCount += 1;
    amount.innerHTML = counterCount;
    if (counter === 5) {
        document.location.replace('https://developer.mozilla.org');
    }
}

＆＃13;

var counterCount = 0;

function counter() {
    var amount = document.getElementById("amount");
    counterCount += 1;
    amount.innerHTML = counterCount;
    if (counter === 5) {
        document.location.replace('https://developer.mozilla.org');
    }
}

＆＃13;

<a onclick="counter()" href="#">I need to be clicked 5 times before I redirect</a>

<p id="amount"></p>

＆＃13;

Answer 3

每次调用该函数时，您都会将计数器重置为零，因为此行在var counterCount = 0;范围内。将它移到函数外面。

＆＃13;

var counterCount = 0;

function counter() {
  var amount = document.getElementById("amount");
  counterCount += 1;
  amount.innerHTML = counterCount;
  if (counter === 5) {
    document.location.replace('https://developer.mozilla.org');
  }
}

＆＃13;

<a onclick="counter()" href="#">I need to be clicked 5 times before I redirect</a>

<p id="amount"></p>

＆＃13;

Answer 4

好的，所以每次运行该功能时都将计数器设置为0。这就是为什么它只会变为1.你必须在函数之外定义反变量。

Answer 5

function counter() {
  const el =  document.getElementById("amount"); // Get the element
  const amount = el.innerHTML + 1; // Get the elements current value + 1
  el.innerHTML = amount; // Change elements value
  if (amount === 5) { // If the value is 5, redirect. This didnt work because your value never got to 5
    document.location.replace('https://developer.mozilla.org');
  }
}

HTML：

<a onclick="counter()" href="#">I need to be clicked 5 times before I 
redirect</a>

<p id="amount">0</p>

编辑：Chin Leung的答案实际上更好

Answer 6

这是因为您在计数器函数中定义了counterCount变量，每次调用该函数时该变量都被重新初始化

  <?php

if (empty($_POST) === false) {
    //errors array
    $errors = array();
    //message variables
    $name = $_POST['form-name'];
    $email = $_POST['form-email'];
    $message = 'This is a message from: ' . $name . '.' . "\r\n\r\n" . 'Please send your reply to: ' . $email . '. ' . "\r\n\r\n" . $_POST['form-msg'];
    $headers = 'From: ' . $email;


    //Validation for name, email, and message fields
    if (empty($name) === true || empty($email) === true || empty($message) === true) {
        $errors[] = 'Name, email, and message are required!';

    } else {
        if (filter_var($email, FILTER_VALIDATE_EMAIL) === false){
            $errors[] = 'That\'s not a valid email address.';
        }
        if (ctype_alpha(str_replace(' ', '', $name)) === false) {
            $errors[] = 'Name must only contain letters!';

    } 

}
   if (empty ($errors) === true) {
       //send email
       mail('myemail@gmail.com', 'Contact Form Submission', $message, $headers);
       //redirect user
       header('Location: http:/www.mysite.com/success.html');
       exit();
   }

 }


?>


                    <?php
        if (isset($_GET['sent']) === true) {
            header('Location: success.html');

        } else {
            if (empty($errors) === false) {
                echo '<ul>';
                foreach($errors as $error) {
                    echo '<li>', $error, '<li>';
                }
            }


            ?>

                        <form method='post' action='success.html'>
                            <label for='form-name'>Name: </label>
                            <input type='text' name='form-name' id='form-name' placeholder="Type your name..." required <?php if (isset($_POST[ 'form-name'])===true) { echo 'value="', strip_tags($_POST[ 'form-name']), '"';}?>>
                            <br>
                            <label for='form-email'>Email: </label>
                            <input type='email' name='form-email' id='form-email' placeholder="Type your email..." required <?php if (isset($_POST[ 'form-email'])===true) { echo 'value="', strip_tags($_POST[ 'form-email']), '"';}?>>
                            <br>
                            <label for='form-msg'>Msg: </label>
                            <textarea type='text' name='form-msg' id='form-msg' placeholder="You get the drift..." required <?php if (isset($_POST[ 'form-msg'])===true) { echo 'value="', strip_tags($_POST[ 'form-msg']), '"';}?>></textarea>
                            <br>
                            <input type='submit' value='Submit' id='submit-button'><br>
                        </form>


                        <?php
            }

            ?>

var counterCount = 0;
function counter() {
  
  var amount = document.getElementById("amount");
  counterCount += 1;
  amount.innerHTML = counterCount;
  if (counterCount === 5) {
  	document.location.replace('https://developer.mozilla.org');
  }
}

Javascript点击计数器不超过1

6 个答案: