Button not saving on local storage when clicked

Question

I am trying to make a website that stores todo in the local storage.

I tried to make it using addEventListener which isn't working when I press the button.

I used bootstrap for writing HTML and some styling to make the website look good.

When the button is clicked, nothing is happening which I don't know why. I changed the button type to type = "button" and also tried by removing the whole type thing but nothing happened. I also removed the preventDefault() but nothing happened.Pls help

let key = document.getElementById("todo")
let value = document.getElementById("tododesc")
let submit = document.getElementById("submit")


submit.addEventListener("click", (e) => {
      // e.preventDefault()
      console.log(e)
      localStorage.setItem(JSON.stringify("todo", [key, value])
      })

html,
body {
  height: 100%;
  width: 100%;
}

<!DOCTYPE html>
<html>

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <title>todo</title>
</head>

<body>
  <div>
    <nav class="navbar navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Todo</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Dropdown
                </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="button">Search</button>
        </form>
      </div>
    </nav>

    <form>
      <div class="form-group">
        <label for="todo">Todo</label>
        <input class="form-control" id="todo" placeholder="Enter Todo">

      </div>
      <div class="form-group">
        <label for="todo description">Todo Description</label>
        <input class="form-control" id="tododesc" placeholder="Enter Todo Description">
      </div>
      <button type="submit" class="btn btn-primary" id='submit'> Submit </button>
    </form>
  </div>



  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

</html>

Remove the type="submit" from the button as this will reload the page. — Neha Soni, Mar 27 '23 at 08:58
`key.value` and `value.value` - you're trying to put references to the field in local storage, instead of the values of the fileds — Jamiec, Mar 27 '23 at 08:59
@NehaSoni - Actually, `type="submit"` is the **default** for `button`. To make a `button` not a submit button, you have to be explicit: ` — T.J. Crowder, Mar 27 '23 at 08:59
Thanks for the response, @T.J.Crowder. But is it? Because if I remove the `type="submit"` and do not use the `type="button"`, it still works. :-( — Neha Soni, Mar 27 '23 at 09:04
@NehaSoni - [Yes, it is](https://html.spec.whatwg.org/multipage/form-elements.html#attr-button-type): *"The missing value default and invalid value default are the Submit Button state."* There must be some *other* change you've made at the same time. :-) The OP's code has `preventDefault`, for instance. — T.J. Crowder, Mar 27 '23 at 10:59
Hey, @T.J.Crowder, you are absolutely right. I got confused because I didn't comment on the `e.preventDefault()` and that's why the default submit event belonging to that button didn't fire and the page didn't reload. But, yeah after commenting the `e.preventDefault()` and removing the button type, the button is taking `submit` type by default. Thanks for pointing that out. :-) — Neha Soni, Mar 27 '23 at 11:16
and as you can see, in js in add event listener fuction, I have written console.log(e) which is also not happening — Abhilasha Tripathi, Mar 28 '23 at 07:27

Button not saving on local storage when clicked

0 Answers0