CODEWITHSUNDEEP
javascripthtmlcss
Andrew
Andrew

Reputation: 528

CSS Doesn't Work For Submitted Input

I've decided to try and make a Notes program as a learning experience. The point was to problem-solve on my own, but I'm pretty clueless as to why this won't work.

When I Shift + Double Click a note to rename it the note changes from a <div> to <input>, but the CSS stays the same. When I press enter (which submits the input) the changes back to <div>, and the CSS is there, but it is very small and doesn't take the shape of the text. Any idea why? Thanks!

Code:

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>

<button class="newList" onclick="newNote()">Create a new note</button>

<br></br>

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<script>

function clickNote(){
  if(event.shiftKey){
    $( "div" ).click(function() {
      $( this ).replaceWith( "<tr><td><form'><input class='rename' placeholder='Type here' onkeydown='enter(event)' id='newListName' autofocus>" + "</input></form></td></tr>" );
    });
  } else {
    location.href='list.html';
  }
}

function enter(event){
  var enter = event.which;
  if (enter == 13){
  var input = document.getElementById("newListName");
    $( "input" ).keyup(function() {
      $( this ).replaceWith( "<tr><td><div class='list' id='list' onclick='clickNote()'>" + input.value + "</div></td></tr>" );
    });
  }
}

function newNote(){
  var newNt = document.createElement("DIV");
  var text = "Rename with Shift + Double Click"
  newNt.textContent = text;
  newNt.setAttribute('class', 'list');
  newNt.setAttribute('id', 'list');
  newNt.setAttribute("onclick", "clickNote()");
  document.body.appendChild(newNt);
}

</script>

</body>
</html>

CSS:

:root {
  --main-color: #FFE033;
  --secondary-color: #FEC82A;
}

.newList {
  height: inherit;
  width: 10%;
  padding: .4%;
  position: relative;
  border-bottom: 4px solid var(--secondary-color);
  background: var(--main-color);
}

.list {
  height: inherit;
  width: 10%;
  padding: .4%;
  position: relative;
  border-bottom: 4px solid var(--secondary-color);
  background: var(--main-color);
}

.rename {
  height: 2.5em;
  width: 116%;
  padding: .4%;
  position: relative;
  border-bottom: 4px solid var(--secondary-color);
  background: var(--main-color);
}

#list {
  cursor: pointer;
}

Upvotes: 0

Views: 27

Answers (1)

Temani Afif
Temani Afif

Reputation: 273010

Am not sure why you are doing this, but you are adding td tr around the div which make it insde a table and create this issue as the width is defined with 10%. Remove it and it should work fine. You need also to correct the input tag.

function clickNote() {
  if (event.shiftKey) {
    $("div").click(function() {
      $(this).replaceWith("<input class='rename' placeholder='Type here' onkeydown='enter(event)' id='newListName' autofocus>");
    });
  } else {
    location.href = 'list.html';
  }
}

function enter(event) {
  var enter = event.which;
  if (enter == 13) {
    var input = document.getElementById("newListName");
    $("input").keyup(function() {
      $(this).replaceWith("<div class='list' id='list' onclick='clickNote()'>" + input.value + "</div>");
    });
  }
}

function newNote() {
  var newNt = document.createElement("DIV");
  var text = "Rename with Shift + Double Click"
  newNt.textContent = text;
  newNt.setAttribute('class', 'list');
  newNt.setAttribute('id', 'list');
  newNt.setAttribute("onclick", "clickNote()");
  document.body.appendChild(newNt);
}
:root {
  --main-color: #FFE033;
  --secondary-color: #FEC82A;
}

.newList {
  height: inherit;
  width: 10%;
  padding: .4%;
  position: relative;
  border-bottom: 4px solid var(--secondary-color);
  background: var(--main-color);
}

.list {
  height: inherit;
  width: 10%;
  padding: .4%;
  position: relative;
  border-bottom: 4px solid var(--secondary-color);
  background: var(--main-color);
}

.rename {
  height: 2.5em;
  width: 100%;
  padding: .4%;
  position: relative;
  border-bottom: 4px solid var(--secondary-color);
  background: var(--main-color);
}

#list {
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="newList" onclick="newNote()">Create a new note</button>

Upvotes: 1

Related Questions