I need help | Smarter Dev | Page 1

lost foxBOT Mar 21, 2024, 7:01 AM

#

@short vortex

File Attachments Not Allowed

For safety reasons we do not allow files with certain file extensions.

quietbalance Said

So I'm basically a beginner in js and well I'm not really sure on how I should answer this question? I'm kind of know to display the text inside the consoles but this question is asking me to display it right below my form without doing any re-adjustments to the other parts, if and else but not sure how to do it without adjusting anything. (The script is attached and also screenshot of the question)

Code Formatting

You can share your code using triple backticks like this:
```
YOUR CODE
```

Large Portions of Code

For longer scripts use Hastebin or GitHub Gists and share the link here

Ignored these files due to them having disallowed file extensions

newMember.html

short vortex Mar 21, 2024, 7:02 AM

#

So I'm basically a beginner in js and well I'm not really sure on how I should answer this question? I'm kind of know to display the text inside the consoles but this question is asking me to display it right below my form without doing any readjustments to the other parts, can someone please help me I know that I'm supposed to be using the event onclick, if and else but not sure how to do it without adjusting anything.

#

the script:

#


    

  </style>
    <meta charset="UTF-8">
    <title>Member Registration</title>
    <script>
      function save(){
        
        var firstName = ""
        var lastName = ""
        var age = 0
        var gender = ""
        var message = ""
        var valid = true;

        // Values input on the form stored in the variables
        firstName = document.getElementById("firstName").value 
        lastName = document.getElementById("lastName").value
        age = document.getElementById("age").value
        gender = document.getElementById("gender").value

       // Add your code here
object.onclick = function save() {
<button onclick = "save()">click me</button>

if (age < 18)

 {
  
 alert("too many attempts, please try again later")



}

}

   </script>

  </head>
  <body>
    <table align = "center">
   <tr><th><h2>New Member Registration</h2>
   <form name="registration"></th></tr>
     <tr><th> <legend>Enter Personal Information</legend>
      <p><label for="firstName">First name</label>
      <input type="text" id="firstName"></p></th></tr>
    <tr><th>  <p><label for="lastName">Last name</label>
      <input type="text" id="lastName"></p></th></tr>
    <tr><th><p><label for="age">Age</label>
      <input type="number" id="age"></p></th></tr>

#

so basically when the age is 18, and correct it should be displaying the information below right after clicking a button.

wet knot Mar 21, 2024, 12:55 PM

#

</style>
    <meta charset="UTF-8">
    <title>Member Registration</title>
    <script>
      function save(){
        
        var firstName = ""
        var lastName = ""
        var age = 0
        var gender = ""
        var message = ""
        var valid = true;

        // Values input on the form stored in the variables
        firstName = document.getElementById("firstName").value 
        lastName = document.getElementById("lastName").value
        age = document.getElementById("age").value
        gender = document.getElementById("gender").value

       // Add your code here
object.onclick = function save() {
<button onclick = "save()">click me</button>

if (age < 18)

 {
  
 alert("too many attempts, please try again later")



}

}

   </script>

  </head>
  <body>
    <table align = "center">
   <tr><th><h2>New Member Registration</h2>
   <form name="registration"></th></tr>
     <tr><th> <legend>Enter Personal Information</legend>
      <p><label for="firstName">First name</label>
      <input type="text" id="firstName"></p></th></tr>
    <tr><th>  <p><label for="lastName">Last name</label>
      <input type="text" id="lastName"></p></th></tr>
    <tr><th><p><label for="age">Age</label>
      <input type="number" id="age"></p></th></tr>

#

Each element has the attributes innerHTML and textContent, and you use these to add an element in text or just plain text, respectively.

instead of doing

console.log("stuff");

Do it this way

element.textContent = "stuff";

#

and dont put html tags inside js

short vortex Mar 22, 2024, 4:30 AM

#

wet knot ```html </style> <meta charset="UTF-8"> <title>Member Registration</titl...

wait but im still confused, I want the form to show right below after clicking on the save button

#

shall I send the full script?

wet knot Mar 22, 2024, 6:39 AM

#

so you have a form which should be initially hidden, not visible to the user
1- It should show when user clicks button? OR
2- Should it be visible initially, but move down after user clicks button?
Both cases use CSS btw, or DOM in the 2nd case if u prefer, and you achieve that best with toggling classes containing the desired properties (effects). Give it a try yourself, or tell me which you want to achieve

short vortex Mar 22, 2024, 7:34 AM

#

wet knot so you have a form which should be initially hidden, not visible to the user 1- ...

here's what the question is asking

short vortex Mar 22, 2024, 9:29 AM

#

short vortex here's what the question is asking

I did some readjustments:

#

<html lang="en">
  <head>
  <style>
    table {

      border: 4px solid black; 
    width: 400px;
    height: 500px;
    text-align:left;
    padding: 3px;
  }


     legend {
      position:relative;
     }
    
  </style>
    <meta charset="UTF-8">
    <title>Member Registration</title>
    <script>
      function save(){
        var firstName = "";
        var lastName = "";
        var age = 0;
        var gender = "";
        var message = "";
        var valid = true;

        // Values input on the form stored in the variables
        firstName = document.getElementById("firstName").value; 
        lastName = document.getElementById("lastName").value;
        age = document.getElementById("age").value;
        gender = document.getElementById("gender").value;

        // add your code here 
        const saveMesage = document.getElementById("saveMessage")
        obj = document.getElementById("saveButton");
        obj.addEventListener('click', function () {
          saveMessage.innerHTML  =  firstName.innerHTML = "",
        lastName.innerHTML = "", age.HTML = "", gender.innerHTML= ""}

          
        });
      
      }
   </script>

  </head>
  <body>
    <table align = "center">
   <tr><th><h2>New Member Registration</h2>
   <form name="registration"></th></tr>
     <tr><th> <legend>Enter Personal Information</legend>
      <p><label for="firstName">First name</label>
      <input type="text" id="firstName"></p></th></tr>
    <tr><th>  <p><label for="lastName">Last name</label>
      <input type="text" id="lastName"></p></th></tr>
    <tr><th><p><label for="age">Age</label>
      <input type="number" id="age"></p></th></tr>
     <tr><th><label for="gender">Select a gender:</label></th></tr>
     <tr><th><select id="gender">
        <option value="Male" selected>Male</option>
        <option value="Female">Female</option></th></tr>
      </select>

      <tr><th><p><input type="button" id="saveButton" value="Save" onClick="save()"></p></th></tr>
      <p id="saveMessage"></p>
    </table>
    </form> 
  </body>
</html>

wet knot Mar 22, 2024, 3:13 PM

#

Ok so here's what I want you to do:
1- there are 2 ways we can achieve that effect: a) add the elements in HTML but initially hidden; b) add the elements using JS
We can do either, but let's do (a) because it's shorter and doesnt break wrists

what you do is add the elements after the form, so

.....
      <select id="gender">
        <option value="Male" selected>Male</option>
        <option value="Female">Female</option></th></tr>
      </select>
      <tr><th><p><input type="button" id="saveButton" value="Save" onClick="save()"></p></th></tr>
    <p id="saveMessage"></p>
  </table>
</form>

<h1>Member details have been saved</h1>
<p style="display: none;">First Name: <span id="detail-fn"></span></p>
<!-- And do the same for the rest -->

As you can see, we added the first detail at the bottom of the code snippet after the form

Then we need to update the values dynamically, so we add the JS code

// This updates the content
element_span.textContent = "information";
// This makes it visible
element_p.style.display = "block";

short vortex Mar 23, 2024, 3:40 PM

#

wet knot Ok so here's what I want you to do: 1- there are 2 ways we can achieve that effe...

thank you so much!

#I need help