单击"是"按钮将添加1，单击"否"按钮将重置为0.就像Streaks

Question

请帮我写Javascript

当你点击"是"按钮时，我想做一个像snapchat条纹一样的条纹，当按下交叉/重置/否按钮时，条纹将被打破！

但主要的事情是，我希望每个用户连胜都存储在他们的帐户中，为此，我稍后将在项目中添加身份验证！

我使用MongoDB存储用户和条纹

条纹将在此处显示：

<p class="mt-2 text-gray-400">
        Praying without any Break since
        <span id="streaks">0</span> day(s)!
      </p>

这些是按钮：

 <div class="group relative flex justify-between items-center mt-2">
      <h1 class="text-lg">Have you offered all Prayers Today?</h1>
      <div class="flex flex-row">
        <!-- YES Button -->
        <button
          id="answer_yes"
          onclick="updateScores"
          class="flex p-2 m-1 border-2 rounded hover:text-white text-green-400 border-green-400 hover:bg-green-400"
        >
          <span>&#10003;</span>
        </button>
        <!--NO BUtton-->
        <button
          id="answer_no"
          class="flex p-2 m-1 border-2 rounded hover:text-white text-red-400 border-red-400 hover:bg-red-400"
        >
          <span>&#10007;</span>
        </button>
      </div>
    </div>

我尝试的Javascript是这样的：

const yes = {
    score: 0,
    button: document.querySelector("#answer_yes"),
    display: document.querySelector("#streaks"),
  };
  const resetButton = {
    score: 0,
    button: document.querySelector("#answer_no"),
    display: document.querySelector("#streaks"),
  };
  function updateScores(streaks) {
    streaks.score += 1;
    streaks.display.classList.add("has-text-success");
    streaks.button.disabled = true;
    streaks.display.textContent = streaks.score;
  }
  yes.button.addEventListener("click", function () {
    updateScores(streaks);
  });
  resetButton.addEventListener("click", reset);
  function reset() {
    for (let p of [yes, resetButton]) {
      p.score = 0;
      p.display.textContent = 0;
      p.button.disabled = false;
    }
  }

附言：我是一个初学者，所以忍受我无用的和糟糕的代码！这是我的第一个全栈项目，我甚至无法创建Javascript。

Answer 1

我发现您当前的代码都是基本的HTML和JavaScript，并且无法工作。所以我成功了。

更改后，这是您的HTML代码：

<p class="mt-2 text-gray-400">
      Praying without any Break since
      <input id="streaks" value=0 disabled/> day(s)!
    </p>
    <div class="group relative flex justify-between items-center mt-2">
      <h1 class="text-lg">Have you offered all Prayers Today?</h1>
      <div class="flex flex-row">
        <button
          id="answer_yes"
          onclick="onYesButton()"
          class="flex p-2 m-1 border-2 rounded hover:text-white text-green-400 border-green-400 hover:bg-green-400"
        >
          <span>&#10003;</span>
        </button>
        <button
          id="answer_no"
          onclick="onNoButton()"
          class="flex p-2 m-1 border-2 rounded hover:text-white text-red-400 border-red-400 hover:bg-red-400"
        >
          <span>&#10007;</span>
        </button>
      </div>
    </div>

这是您的JS代码：

function onYesButton() {
  if (+document.getElementById('streaks').value >= 0) {
    document.getElementById('streaks').value =
      +document.getElementById('streaks').value + 1;
  }
}
function onNoButton() {
  if (+document.getElementById('streaks').value >= 1) {
    document.getElementById('streaks').value =
      +document.getElementById('streaks').value - 1;
  }
}

您现在可以检查它，功能如您所愿。