javascriptbuttoninputoutputbuttonclick

Input & Output Button


can someone please help? I have been struggling with this for hrs. Here is the code. I have to be able to type whatever name into the boxes click the display button to show what I typed, concatenate with a hello and say what I typed below then also be able to hit the clear button to clear everything as if refreshed I also have to have call a function on my other page named display Hello Message. I can only get it to display the hello and the first name and clear one thing. Here's what I have.

<!DOCTYPE html>
<html>
  \
  <head>
    <title>JavaScript: Input & Output Assignment</title>
  </head>
  <body>
    <h1>Hello Name - Input & Output</h1>
    <div>
      <label for="firstNameInput"> First Name</label>
      <input type="text" id="firstNameInput" placeholder="Enter a first name" />
      <label for="lastNameInput"> Last Name</label>
      <input type="text" id="lastNameInput" placeholder="Enter a last name" />
      <button onclick="displayHelloMessage()">Display</button> <button onclick="displayHelloMessage()">Clear</button>
    </div>
    <p id="helloNameOutput"></p>
    <script src="/script.js"></script>
  </body>
</html>

Solution

  •       function displayHelloMessage() {
            var fname = document.getElementById("firstNameInput").value
            var lname = document.getElementById("lastNameInput").value
    
            document.getElementById("helloNameOutput").innerHTML  = "Hello " + fname + " " + lname 
          }
    
          function clearMessage() {
            document.getElementById("helloNameOutput").innerHTML  = ""
          }
    
    

    Add theese functions to your js file and change onClick on the clear button to clearMessage