初学者 javascript 按钮

Question

我真的很难解决一个基本的 javascript 问题，我找不到 Google 帮助的正确方法。我一直在练习 Javascript，但到目前为止，我主要只是遵循提示，而不是编写自己的想法。我真的花了几个小时尝试自己解决这个问题。这是我第一次尝试从头开始生成自己的 javaScript。

基本上，我只是想做一些类似选择你自己的冒险故事的事情。这个想法是 html 中的 p 元素随着 yes 和 no 响应的变化而变化。出于某种原因，我的 javascript 代码跳过了我的 if 并转到了我的 else，这意味着不满足第一个条件。对于我的生活，当用户单击“是”时，我无法弄清楚如何满足第一个 if 条件。有什么建议吗？

function beginWalk() {
  var start = "You go outside. It's a beautiful day!";
  var stay = "You stay inside and snuggle up in your bed.";

  {
    if (document.getElementById("yes").click == true) {
      document.getElementById("change").innerHTML = start;
    } else {
      document.getElementById("change").innerHTML = stay;
    }
  }
}

<button onclick="beginWalk()" value="true" id="yes">Yes</button>
<button onclick="beginWalk()" value="false" id="no">No</button>
<p id="change">
  change
</p>

Answer 1

简单的解决方案是在您的按钮点击事件中传递您需要的参数，并以此为基础您的条件。

function beginWalk(walk) {
  const start = "You go outside. It's a beautiful day!";
  const stay = "You stay inside and snuggle up in your bed.";

  if (walk === true) {
    document.getElementById("change").innerText = start;
  } else {
    document.getElementById("change").innerText = stay;
  }
}

<button onclick="beginWalk(true)" value="true" id="yes">Yes</button>
<button onclick="beginWalk(false)" value="false" id="no">No</button>
<p id="change">
  change
</p>

Answer 2

它不使用 if 语句，但它是这样工作的！

function beginWalk() {
   var start = "You go outside. It's a beautiful day!";
   var stay = "You stay inside and snuggle up in your bed.";

    document.getElementById("yes").addEventListener("click", () => {

    document.getElementById("change").innerHTML = start}); 

    document.getElementById("no").addEventListener("click", () => {    

    document.getElementById("change").innerHTML = stay});
    }

干杯！

Answer 3

您当前的代码存在逻辑错误。您的 if 条件将始终 return false 并且将执行 else 中的代码，因为以下行没有意义。

if (document.getElementById("yes").click == true)

不过，您可以进行如下所示的一些调整。这里我将 status 的默认值传递为 false，这意味着如果函数中没有传递任何内容，则 status 将被视为 false。如果将 true 传递给函数，则将执行 if 条件。它使代码更简洁。

function beginWalk(status=false) {
  var text = "You stay inside and snuggle up in your bed.";
  if(status===true){
     text = "You go outside. It's a beautiful day!";
  }
  document.getElementById("change").innerText = text;
}

你的 html 可以像下面给出的那样

<button onclick="beginWalk(true)" value="true" id="yes">Yes</button>
<button onclick="beginWalk()" value="false" id="no">No</button>
<p id="change">
  change
</p>

Answer 4

function beginWalk() {
  var start = "You go outside. It's a beautiful day!";
  var stay = "You stay inside and snuggle up in your bed.";

  {
    if (event.target.value === 'true') {
      document.getElementById("change").innerHTML = start;
    } else {
      document.getElementById("change").innerHTML = stay;
    }
  }
}

<button onclick="beginWalk()" value="true" id="yes">Yes</button>
<button onclick="beginWalk()" value="false" id="no">No</button>
<p id="change">
  change
</p>

初学者 javascript 按钮

beginner javascript button

javascript

if-statement

interactive

button