Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Calculator

0

31
Views
i don't know how to add the user input back to the DOM and i think its something with my js code

I don't konw what to do

I need help with this js script and I just need to know how to show a user input in a html styled templet that I made but I just don't don't known how

<!-- add email side nav -->
<div id="side-form" class="sidenav side-form">
  <form class="add-email container section">
    <h6>add a new email</h6>
    <div class="divider"></div>
    <div class="input-field">
      <input keypath="email" placeholder="example@gmail.com" id="title" type="text" class="validate">
      <label for="title">write email here</label>
    </div>
    <div class="input-field">
      <label>
        <input type="checkbox" />
        <span>Notifications</span>
      </label>
    </div>
    <br>
    <div class="input-field center">
      <button class="btn-floating blue pulse" id="add_email" onclick="getValue()">Add</button>
    </div>
  </form>
</div>

7 months ago · Juan Pablo Isaza
1 answers
Answer question

0

Add this to your JS file or <script> tag:

const userInput = document.getElementById("title")

userInput.addEventListener("keyup", (e) => {
    // append e.target.value to the page
    document.createElement("p").innerText = e.target.value;
});

The above will append a paragraph to your page with the value of the email in it. It is now part of the Dom. Obviously, you will change the logic inside the event listener to render it to your page appropriately. Alternatively, you can set an event listener to the add-button and render it from there.

7 months ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Plans Our process Sales
Legal
Terms and conditions Privacy policy
© 2023 PeakU Inc. All Rights Reserved.