html - 如果值为 0 或为空，如何隐藏按钮？

Question

我正在开发一个测验应用程序，该应用程序会从数据库中提出带有多个可能答案的问题，当我需要输入 2 个可能的答案而不是 3 或 4 时，我只是在隐藏按钮时遇到了问题

这是html代码:

<button class="btn btn-default answer" type="submit" name="score" value="<?=$qdata["sc1"]?>" style="white-space: normal; font-size: 15px;"><?=base64_decode($qdata["an1"])?></button>
<button class="btn btn-default answer" type="submit" name="score" value="<?=$qdata["sc2"]?>" style="white-space: normal; font-size: 15px;"><?=base64_decode($qdata["an2"])?></button>
<button class="btn btn-default answer" type="submit" name="score" value="<?=$qdata["sc3"]?>" style="white-space: normal; font-size: 15px;"><?=base64_decode($qdata["an3"])?></button>
<button class="btn btn-default answer" type="submit" name="score" value="<?=$qdata["sc4"]?>" style="white-space: normal; font-size: 15px;"><?=base64_decode($qdata["an4"])?></button>

我不知道如何在值为空时隐藏按钮，对不起我的英语。

Answer 1

你真的应该根据你是否从服务器获取数据来显示/隐藏按钮，而不是在你已经用数据更新了按钮之后。无论如何，这可能就是您所要求的。

编辑:在您的情况下，您可能还需要检查以确保 button.value != '' 因为您的数据可能只是空白。

var buttons = document.querySelectorAll('button');

buttons.forEach(function(button) {
  if (!button.value) {
    button.style.display = "none"
  }
});

<button class="btn btn-default answer" type="submit" name="score" value="1" style="white-space: normal; font-size: 15px;">1</button>
<button class="btn btn-default answer" type="submit" name="score" value="2" style="white-space: normal; font-size: 15px;">2</button>
<button class="btn btn-default answer" type="submit" name="score" style="white-space: normal; font-size: 15px;">3</button>
<button class="btn btn-default answer" type="submit" name="score" value="4" style="white-space: normal; font-size: 15px;">4</button>