Input & Output Button-CodePudding

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>

CodePudding user response：

Since I do not know what is going on in your script.js I put some custom jQuery in the HTML-script-tag and removed the onclick functions one the buttons.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!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 >Display</button> <button >Clear</button>
    </div>
    <p id="helloNameOutput"></p>
    <script>
      $('.display').on('click', function() {
      var firstname = $('#firstNameInput').val();
      var lastname = $('#lastNameInput').val();
      
      $('#helloNameOutput').text('Hello '   firstname   ' '   lastname) })
      
      $('.clear').on('click', function() {
      $('#firstNameInput').val('');
      $('#lastNameInput').val('');
      $('#helloNameOutput').text('') })
      
      
        
      
    </script>
  </body>
</html>

CodePudding user response：

nullify the inputs' values. for example if onclick event has been triggered for the clear button, the function that is called can nullify the inputs by doing this:

document.getElementById("firstNameInput").value = ""; document.getElementById("lastNameInput").value = "";

all is done through purely Javascript.

CodePudding user response：

      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