html forms with javascript variable undefined

Question

I am doing a project for school and I need a form with at least two text entries with JavaScript code to request, accept and manipulate the text of the form. so this is what I have come up with and I have spent more time on this than I would like to admit.

I cannot get it to define the variable fullname. Help would be appreciated from this rookie. If I knew any less about coding I wouldn't be coding at all.

<head>
<script>
function sayHi(){
var firstName = document.getElementById("firstName");
var lastName = document.getElementById("lastName");
var fullName = firstName + lastName;
var name = fullName.value;
var txtOutput = document.getElementById("txtOutput");

txtOutput.value = "Hi there, " + name + "!"
}

</script>
<style>
legend {
   background-color: #000;
   color: #fff;
   padding: 3px 6px;}

   .txtoutput {
   font: 1rem 'Fira Sans', sans-serif;
}

input {
   margin: .4rem;
}


</style>
<body>
  <form action = "">
  <fieldset>
  <legend>Tell us your name</legend>
  <label>First: </label>
  <input type = "text" id = "firstName" />
  <label>Last:</label>
  <input type="text" id="lastName"/>
  <input type = "button" value = "click me" onclick = "sayHi()"/>
  <input type = "text"  id = "txtOutput" />
 </form>

</body>
</html>

BrunoT · Accepted Answer · 2021-03-07 16:02:26Z

1

The problem is that you are trying to concatenate two DOM elements (firstName and lastName). You should get their input values (firstName.value and lastName.value) and then concatenate.

EDIT: also, there is no need to have fullName.value when variable fullName already holds the string value. Result function would look like this:

function sayHi(){
    var firstName = document.getElementById("firstName");
    var lastName = document.getElementById("lastName");
    var fullName = firstName.value + " " + lastName.value;
    var txtOutput = document.getElementById("txtOutput");
    txtOutput.value = "Hi there, " + fullName + "!"
}

edited Mar 7, 2021 at 16:02

answered Mar 7, 2021 at 15:56

BrunoT

4624 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tmac718 Over a year ago

Thank you for the quick response. That did it. + " " + Helped with display as well. Thanks again!

Collectives™ on Stack Overflow

html forms with javascript variable undefined

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related