javascript - 如果第二条是黑色的，如何只发送一条消息，但如果我填写了两个变量，如何发送两条消息？

Question

我根据我在按钮中输入的消息在 div 中添加段落标签。其中一个按钮 (HUNT) 包含两条消息，而第二个按钮 (SELL) 仅包含一条消息。我遇到的问题是，无论第二条消息是否为空白，我总是会显示“未定义”消息。

这是我的代码：

function addLog(logBefore, logAfter) {
  var par = document.createElement("p");
  var node1 = document.createTextNode(logBefore);
  var node2 = document.createTextNode(logBefore);
  par.appendChild(node1);

  var element = document.getElementById("logs");
  // Here you can also use element.childNodes.length
  const count = document.getElementById("logs").getElementsByTagName("p").length;
  if (count >= 8) {
    element.removeChild(element.childNodes[0]);
  }
  element.appendChild(par);

  if (node2 != '') {
    setTimeout(function addLog(logBefore, logAfter) {
      var par = document.createElement("p");
      var node2 = document.createTextNode(logAfter);
      par.appendChild(node2);

      var element = document.getElementById("logs");
      // Here you can also use element.childNodes.length
      const count = document.getElementById("logs").getElementsByTagName("p").length;
      if (count >= 8) {
        element.removeChild(element.childNodes[0]);
      }
      element.appendChild(par);
    }, 1000);
  };
};


var credits = 0;
var clickPower = 1;

function addCred() {
  credits = credits + clickPower;
  document.getElementById('credits').innerHTML = credits + " Skatts";
};

#logs {
  display: flex;
  flex-direction: column-reverse;
}

#logs p {
  margin-top: 0px;
}

<div id="credits"></div>
<button onclick="addLog('Hunt begun', 'Hunt successful! You now have ' + credits + ' Skatts'); addCred();">HUNT</button>
<br>
<button onclick="addLog('Resources sold', '')">SELL</button>
<div id="logs"></div>

标签： javascripthtml

Answer 1

我对您的代码以及它要做的事情有点困惑，但我相信：

• 您不需要像这样调用超时函数：

  setTimeout(function addLog(logBefore, logAfter) {
  

• 为什么甚至再次将其addLog称为与父母相同的名称？而且您不需要在其中传递值，因为它是可以使用您的父值的嵌套函数logBeforean logAfter，所以只需执行以下操作：

  setTimeout(function () {

现在，当您在 timeout 内控制台日志值时，您将看到传递的值nod2并将被填充。

function addLog(logBefore, logAfter) {
  var par = document.createElement("p");
  var node1 = document.createTextNode(logBefore);
  var node2 = document.createTextNode(logBefore);
  par.appendChild(node1);

  
  var element = document.getElementById("logs");
  // Here you can also use element.childNodes.length
  const count = document.getElementById("logs").getElementsByTagName("p").length;
  if (count >= 8) {
    element.removeChild(element.childNodes[0]);
  }
  element.appendChild(par);

  if (node2 != '') {
    setTimeout(function () {
    
      console.log(logBefore)
      console.log(logAfter)
      
      var par = document.createElement("p");
      var node2 = document.createTextNode(logAfter);
      par.appendChild(node2);


      var element = document.getElementById("logs");
      // Here you can also use element.childNodes.length
      const count = document.getElementById("logs").getElementsByTagName("p").length;
      if (count >= 8) {
        element.removeChild(element.childNodes[0]);
      }
      element.appendChild(par);
    }, 1000);
  };
};


var credits = 0;
var clickPower = 1;

function addCred() {
  credits = credits + clickPower;
  document.getElementById('credits').innerHTML = credits + " Skatts";
};

#logs {
  display: flex;
  flex-direction: column-reverse;
}

#logs p {
  margin-top: 0px;
}

<div id="credits"></div>
<button onclick="addLog('Hunt begun', 'Hunt successful! You now have ' + credits + ' Skatts'); addCred();">HUNT</button>
<br>
<button onclick="addLog('Resources sold', '')">SELL</button>
<div id="logs"></div>