html中的简单任务javascript按钮答案

【问题标题】：simple task javascript buttons in htmlhtml中的简单任务javascript按钮
【发布时间】：2020-01-16 12:00:49
【问题描述】：

有人可以帮我制作一个在点击时打印出谢谢的按钮吗？我知道有很多方法可以做到这一点，但在我的情况下，我需要使用 if 语句，这让我完全被难住了。我没有做太多，因为我完全不确定要使用什么语法。我为一个学校项目制作了一个网站，其中一个页面上有一个表格。必须使用 javascript 来处理 if 语句。我想在表单底部有一个按钮，单击该按钮会对页面执行某些操作。我真的不介意会发生什么，但我认为感谢信息会很好。

干杯:)

<!DOCTYPE html>
<html>

<body>
<button id="sub">Subscribe</button>
</body>

<script>
function button () {
    var message = document.getElementById("message");

    if (sub.onclicked == true) {
        /*Pop up with thank you*/
    };
};

button ();
</script>

</html>

【问题讨论】：

对于弹出窗口，使用alert("Thank you");
您不需要 if 语句来在单击按钮时显示消息。也许您可以重新考虑您的要求。

标签： javascript html button

【解决方案1】：

<!DOCTYPE html>
<html>

<body>
<button id="sub" onclick="button(event)">Subscribe</button>

<script>
function button(event) {
    var message = document.getElementById("message");

    if (event) {
        /*Pop up with thank you*/
         alert("Thank you");
    }
};
</script>
</body>
</html>

【讨论】：

【解决方案2】：

如果您需要if，那么您可以测试按钮是否只被点击了一次。但首先你需要一个在单击按钮时触发的事件，并且 document.getElementById 值需要与你的 html id 属性相匹配。

function button () {
    var message = document.getElementById("sub");
    var cliked = false
    message.onclick = function() {
        if (!cliked) {
            cliked = true;
            alert('Thank you');
        }
    };
}

button();

&lt;button id="sub"&gt;Subscribe&lt;/button&gt;

【讨论】：

【解决方案3】：

这里的关键问题是您试图引入无用的代码。例如，当您单击按钮时，如何向页面添加消息：

const button = document.querySelector('#sub');
const message = document.querySelector("#message");

button.addEventListener('click', handleClick, false);

function handleClick(event) {
  message.textContent = 'Hallo';
};

<button id="sub">Subscribe</button>
<div id="message" />

鉴于您在问题中的基本代码示例，此处没有空间可以使用 if 语句。如果您开始添加不必要的代码，您的作业甚至可能会被标记。这就是为什么我建议查看您的要求并进行更改的原因。

例如，您可能决定想要两个按钮，当您单击它们时会给出不同的消息，使用if 语句来区分它们：

// Because we have two buttons we use a class instead of an id
// and we can pick them up with `querySelectorAll`
const buttons = document.querySelectorAll('.sub');
const message = document.querySelector("#message");

// Instead of attaching one event listener to one element we
// loop over our buttons and attach an event listener to each one
buttons.forEach(button => button.addEventListener('click', handleClick, false));

function handleClick(event) {

  // We destructure the dataset id from the button that was clicked
  const { target: { dataset: { id } } } = event;

  // And we use an if statement to choose between two different messages
  if (id === 'msg1') message.textContent = 'Hallo';
  if (id === 'msg2') message.textContent = 'Secret message!';
};

<!-- Each button has its own data attribute -->
<button data-id="msg1" class="sub">Button 1</button>
<button data-id="msg2" class="sub">Button 2</button>
<div id="message" />

进一步阅读：

【讨论】：