CODEWITHSUNDEEP
javascripthtml
Cora
Cora

Reputation: 1

JavaScript - First name input and last name input then greet the user with (Welcome "first-name" "lastname")

I can imagine that the answer is simple, can someone look over my code. It's supposed to be two input boxes with a popup saying (Welcome "first-name" "last-name")

function welcomeTheUsar() {
  // Some code borrowed and rewritten from UNKNOWN's lessons

  let firstName = document.getElementById("first-name").value;
  let lastName = document.getElementById("last-name").value;
  let fullName = "first-name" + "last-name".value;
  console.log(fullName);
  alert("Welcome " + "fullname");
}
<!-- Make my name in alternating colors for each of the letters-->
<h1>Cora</h1>
<div id="welcomeTheUsar">
  <!--This is the welcome div for the user, code also borrowed and moddified from UNKNOWN's lessons-->
  <input placeholder="Enter First Name" id="first-name">
  <input placeholder="Enter Last Name" id="last-name">
  <button onclick="welcomeTheUsar()">Greetings</button>
</div>

Upvotes: 0

Views: 8223

Answers (3)

user3051780
user3051780

Reputation:

You are not using the given variables but text strings that looks like the variables.

This one will not work, since it's just text, and you try to get the value of a string "last-name".value, which you cant.

let fullName="first-name"+"last-name".value;

This one will just show "Welcome fullname"

alert("Welcome "+"fullname");

When you use quotation around something, it seen as a text and not a variable.

function welcomeTheUsar() {
    const
        firstName = document.getElementById("first-name").value,
        lastName = document.getElementById("last-name").value;
    alert(`Welcome ${firstName} ${lastName}`);
}
<div id="welcomeTheUsar">
    <input placeholder="Enter First Name" id="first-name">
    <input placeholder="Enter Last Name" id="last-name">
    <button onclick="welcomeTheUsar()">Greetings</button>
</div>

Upvotes: 0

janbiko
janbiko

Reputation: 91

you don't user variable names inside strings like this "variableName", it will be just interpreted as plain text. It should be like this:

<script>
    function welcomeTheUsar() {
            // Some code borrowed and rewritten from UNKNOWN's lessons

            let firstName = document.getElementById("first-name").value; 
            let lastName= document.getElementById("last-name").value;
            let fullName= `${firstName} ${lastName}`;
            console.log(fullName);
            alert("Welcome "+fullName);
    }
</script>

    <!-- Make my name in alternating colors for each of the letters-->
    <h1>Cora</h1>

<body>

    <div id="welcomeTheUsar">
    <!--This is the welcome div for the user, code also borrowed and moddified from UNKNOWN's lessons-->
    <input placeholder="Enter First Name" id="first-name"> 
    <input placeholder="Enter Last Name" id="last-name"> 
    <button onclick="welcomeTheUsar()">Greetings</button> 

</div>

Upvotes: 1

Akzhol Kadylbek
Akzhol Kadylbek

Reputation: 101

The anwer should be:

function welcomeTheUsar() {
            // Some code borrowed and rewritten from UNKNOWN's lessons

            let firstName = document.getElementById("first-name").value; 
            let lastName= document.getElementById("last-name").value;
            let fullName=firstName+ " " + lastName;
            console.log(fullName);
            alert("Welcome "+ fullName);
    }

Upvotes: 0

Related Questions