CODEWITHSUNDEEP
javascripthtml
user14277351
user14277351

Reputation:

How can I get my messages to show up properly?

I have two buttons - one that sends two messages with a one-second interval, and the other only sends one message, with the second left as undefined (this will be clearer once you see the code). How do I stop undefined from showing up?

var credits = 0;
var currency = 'Skatter';

function addLog(logBefore, logAfter) {
  var par = document.createElement("p");
  var node1 = document.createTextNode(logBefore);
  var node2 = document.createTextNode(logAfter);
  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 >= 18) {
    element.removeChild(element.childNodes[0]);
  }
  element.appendChild(par);

  if (node2 !== undefined) {
    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);
  }
};
<button onclick="addLog('Hunt begun', 'Hunt successful! You now have ' + credits + ' ' + currency)">HUNT</button>
<br>
<button onclick="addLog('Resources sold')">SELL</button>

<div id="logs" style="display: flex; flex-direction: column-reverse;"></div>

Upvotes: 0

Views: 35

Answers (3)

dale landry
dale landry

Reputation: 8610

You should change the conditional to check if the direct log logAfter is not undefined, not the textNode. This will fix you issue...

var credits = 0;
var currency = 'Skatter';

function addLog(logBefore, logAfter) {
  var par = document.createElement("p");
  var node1 = document.createTextNode(logBefore);
  var node2 = document.createTextNode(logAfter);
  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 >= 18) {
    element.removeChild(element.childNodes[0]);
  }
  element.appendChild(par);

  if (logAfter !== undefined) {
    setTimeout(function() {


      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);
  }
};
<button onclick="addLog('Hunt begun', 'Hunt successful! You now have ' + credits + ' ' + currency)">HUNT</button>
<br>
<button onclick="addLog('Resources sold')">SELL</button>

<div id="logs" style="display: flex; flex-direction: column-reverse;"></div>

Upvotes: 0

Scott Anderson
Scott Anderson

Reputation: 693

The core problem with your code is that you are asking if node2 variable you have created is falsey (evaluates to false), but a text node will never evaluate to false because it is an object which holds values

// try this in your browser console
>>> if (document.createTextNode(undefined)) { 
console.log("not null")
}
>>> "not null" //output

If you want to check if the program gave a value for the second parameter (logAfter), then you should, explicitly do this instead, like:

if (logAfter !== undefined) {
    // do stuff
}

Upvotes: 1

Nikolay
Nikolay

Reputation: 91

On the second button you are passing just one argument to the addLog function.

Upvotes: 1

Related Questions