0
<body>
    <h1>Insert here:</h1>
    <button>Try</button>
    <input name='myName' type="text">
    <h2>No one here</h2>
    
    <script>
        let button = document.querySelector('button');
        let h2 = document.querySelector('h2');
        let myName = document.querySelector('input');
        
        function sayHi(name = 'Stranger'){
            h2.innerHTML = `Hello ${name}`;
        }
        
        button.addEventListener('click', ()=>{
            sayHi(myName.value);
        });
    </script>

</body>

So, I recently started JS and I was trying simple functions, just to practice. This code basically should take whatever you write and print "hello (whatyouwrite)" or simply print "hello Stranger" if you write nothing. However I cannot manage to use the default parameter and when I write nothing and press the button it prints "Hello " whith a blank space after hello. I realize the "nothing" I send is still something but I cannot figure out what it is or how to do it properly.

Lastly, I've been following this tutorials: https://youtu.be/WyC678zya3E?list=PLP5MAKLy8lP9FUx06-avV66mS8LXz7_Bb&t=489 which writes the exact same code and, for him, works as it should...

Luca
  • 1
  • 1
  • 4
    Because you pass an empty string `""` as a parameter. Default parameters works only with `undefined` – Konrad Nov 29 '22 at 17:54
  • 1
    Default parameters are only used if you don't pass anything for them *or* if you pass `undefined`. An empty value in an input is `""` - an empty string. Not `undefined`. Do you need to use the *default* parameter? Then you need to pass in `undefined` instead of `""`. If you just want to provide a fallback value, then you can substitute `""` for the fallback. – VLAZ Nov 29 '22 at 17:55
  • 1
    `sayHi(myName.value || undefined);` or `h2.innerHTML = \`Hello ${name || 'Stranger'}\`;` – epascarello Nov 29 '22 at 17:57
  • Alternatively, don't use a "default parameter": `function sayHi(name) { name ||= "Stranger;` – freedomn-m Nov 29 '22 at 17:58
  • You're programming at the boundary between two systems: the Web and JavaScript. The Web specifies that the value of an empty text field be the empty string. This is actually slightly inconvenient, given the behavior of default arguments, but: two systems. – Ben Aston Nov 29 '22 at 18:08
  • Thanks for the answers, managed to get it to work ^^ – Luca Nov 29 '22 at 18:08

2 Answers2

1
      button.addEventListener('click', ()=>{
          sayHi(myName.value);
          sayHi();//this will invoke default parameter
      });

do this instead

function sayHi(name){
        if (name.length === 0)
            name = 'Stranger';
          h2.innerHTML = `Hello ${name}`;
      }
0

It's because myName.value is passing an empty string to the sayHi function. You can add an if condition in the callback for the event listener to check whether myName.value is an empty string or not like this.

button.addEventListener("click", () => {
  if (myName.value) {
    sayHi(myName.value);
  } else {
    sayHi();
  }
});

or use the ternary operator if you want to be more concise.

bar_ok
  • 29
  • 1
  • 4