CODEWITHSUNDEEP
javascripthtml
UCYT5040
UCYT5040

Reputation: 114

Why does my input element disappear, even though the code is the same when it does appear?

I'm working on a todo website called Notekeeper+. It has a edit mode toggle, so there is view mode and edit mode, however when I put it in edit mode, my input element does not appear. This makes no sense because this website starts in edit mode, and the input shows. I have compared the website when it started to the website when I put it in edit mode after putting it in view mode and it is the same.

Javascript:

editMode = true;
items = 1
function toggleEditMode() {
    console.log(editMode)
if (editMode == true) {
    editMode = false
    for (i = 0; i < items; i++) {
        document.getElementById('item' + (i + 1)).innerHTML = "<h1 id=\"itemTitle" + (i + 1) + "\">" + document.getElementById('itemTitle' + (i + 1)).value + "</h1>"
        }
} else {
    editMode = true
    for (i = 0; i < items; i++) {
        document.getElementById('item' + (i + 1)).innerHTML = "<input type=\"text\" id=\"itemTitle" + (i + 1) + "\" value=\"" + document.getElementById('itemTitle' + (i + 1)).innerHTML + ">"
        }
}
}

HTML (in edit mode):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Notekeeper+</title>
    <link href="/style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <script src="/script.js"></script>
    <div class="bar">
    <h2>Notekeeper+</h2>
    </div>
    <button onclick="toggleEditMode()" class="right">Toggle Edit Mode</button>
    <button class="right">+task</button>
    <button class="right">+note</button>
    <div class="grid-container">
        <div id="item1"><input type="text" id="itemTitle1" value="New Note"></input></div>
    </div>
  </body>
</html>

Full code can be found at https://repl.it/@UCYT5040/Notekeeper. Feel free to fork that repl for testing.

Upvotes: 1

Views: 585

Answers (1)

Spectric
Spectric

Reputation: 31987

You are missing 2 semicolons and a quotation 😛, although to be frank, the semicolons weren't strictly necessary, so you were just missing an ending quote for the value attribute.

editMode = true;
items = 1

function toggleEditMode() {
  if (editMode == true) {
    editMode = false;
    for (i = 0; i < items; i++) {
      document.getElementById('item' + (i + 1)).innerHTML = "<h1 id=\"itemTitle" + (i + 1) + "\">" + document.getElementById('itemTitle' + (i + 1)).value + "</h1>"
    }
  } else {
    editMode = true;
    for (i = 0; i < items; i++) {
      document.getElementById('item' + (i + 1)).innerHTML = "<input type=\"text\" id=\"itemTitle" + (i + 1) + "\" value=\"" + document.getElementById('itemTitle' + (i + 1)).innerHTML + "\">"
    }
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Notekeeper+</title>
  <link href="/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <script src="/script.js"></script>
  <div class="bar">
    <h2>Notekeeper+</h2>
  </div>
  <button onclick="toggleEditMode()" class="right">Toggle Edit Mode</button>
  <button class="right">+task</button>
  <button class="right">+note</button>
  <div class="grid-container">
    <div id="item1"><input type="text" id="itemTitle1" value="New Note">
    </div>
</body>

</html>

These types of errors are usually why I prefer using document.createElement(tagName) and setAttribute(name, value) rather than directly modifying HTML.

Upvotes: 1

Related Questions