Get input value from fieldset?

Question

I have a fieldset with contenteditable=true and I want to get the value of it to save inside the local storage. I am trying to make a save and load button. I want to click the save button, and it will save the value inside the fieldset and then when the load button is clicked I take the value from local storage and put it into the fieldset. The code below includes what is not working. When I save it and console log the value from local storage, it says undefined.

HTML CODE:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Editor</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div class="buttons">
      <button
        class="bold"
        onclick="document.execCommand('bold',false,null);"
        title="Bold"
      >
        𝗕
      </button>

      <button
        class="italic"
        onclick="document.execCommand('italic',false,null);"
        title="Italic"
      >
        𝘐
      </button>

      <button
        class="underline"
        onclick="document.execCommand('underline',false,null);"
        title="Underline"
      >
        U̲
      </button>

      <input
        type="color"
        class="color-picker"
        id="colorPicker"
        oninput="changeColorText(this.value);"
        title="Change text color"
      />

      <button id="highlight"><mark>A</mark></button>

      <button id="bulletPoint">•</button>

      <!-- Make something to change the font size -->
      <button id="fontSize" onclick="changeFont()">Change</button>
      <input type="number" id="fontInput" placeholder="Size" />

      <select id="fontList">
        <option value="Arial">Arial</option>
        <option value="Comic Sans MS">Comic Sans MS</option>
        <option value="Courier New">Courier New</option>
        <option value="Georgia">Georgia</option>
        <option value="Helvetica">Helvetica</option>
        <option value="Impact">Impact</option>
        <option value="Lucida Console">Lucida Console</option>
        <option value="Lucida Sans Unicode">Lucida Sans Unicode</option>
        <option value="Palatino Linotype">Palatino Linotype</option>
        <option value="Tahoma">Tahoma</option>
        <option value="Times New Roman">Times New Roman</option>
        <option value="Trebuchet MS">Trebuchet MS</option>
        <option value="Verdana">Verdana</option>
      </select>
    </div>

    <!-- Make a button to save the text in local storage when clicked -->
    <button id="save">Save</button>

    <!-- Make a button to load the text from localstorage -->
    <button id="load">Load</button>

    <fieldset class="userInput" contenteditable="true"></fieldset>
    <script src="use.js"></script>
  </body>
</html>

Javascript code:

var boldBtn = document.querySelector(".bold");
var italicBtn = document.querySelector(".italic");
var underlineBtn = document.querySelector(".underline");
var colorPicker = document.querySelector(".color-picker");
var highlightBtn = document.querySelector("#highlight");
var bulletPointBtn = document.querySelector("#bulletPoint");
var fontSize = document.querySelector("#fontSize");
var fontInput = document.querySelector("#fontInput");
var fontList = document.querySelector("#fontList");
var saveBtn = document.querySelector("#save");
var userInput = document.querySelector(".userInput");
var loadBtn = document.querySelector("#load");

boldBtn.addEventListener("click", function () {
  boldBtn.classList.toggle("inUse");
});

italicBtn.addEventListener("click", function () {
  italicBtn.classList.toggle("inUse");
});

underlineBtn.addEventListener("click", function () {
  underlineBtn.classList.toggle("inUse");
});

highlightBtn.addEventListener("click", function () {
  highlightBtn.classList.toggle("inUse");
});

const changeColorText = (color) => {
  document.execCommand("styleWithCSS", false, true);
  document.execCommand("foreColor", false, color);
};

document.getElementById("highlight").addEventListener("click", function () {
  var range = window.getSelection().getRangeAt(0),
    span = document.createElement("span");

  span.className = "highlight";
  span.appendChild(range.extractContents());
  range.insertNode(span);
});
//Add a bullet point using the html tag <ul> when the user clicks on the bullet point button
bulletPointBtn.addEventListener("click", function () {
  document.execCommand("insertHTML", false, "<ul><li>&nbsp;</li></ul>");
});

function changeFont() {
  document.execCommand("fontSize", false, "7");
  var fontElements = document.getElementsByTagName("font");
  for (var i = 0, len = fontElements.length; i < len; ++i) {
    if (fontElements[i].size == "7") {
      fontElements[i].removeAttribute("size");
      fontElements[i].style.fontSize = fontInput.value + "px";
    }
  }
}
// Make the font whatever the user selects from the dropdown menu
fontList.addEventListener("change", function () {
  document.execCommand("fontName", false, fontList.value);
});

// When the user clicks the save button, save the text from the fieldset to local storage
saveBtn.addEventListener("click", function () {
  localStorage.setItem("userInput", userInput.value);
  console.log(localStorage.getItem("userInput"));
});

//When the user clicks the load button, load the text from local storage to the fieldset and display it if it exists
loadBtn.addEventListener("click", function () {
  if (localStorage.getItem("userInput")) {
    userInput.value = localStorage.getItem("userInput");
  }
});

Answer 1

This is because the 'fieldset' element doesn't contain the 'value' prop by default. You can use 'textContent' to get the text input from your fieldset.

This will look like this:

saveBtn.addEventListener("click", function () {
  localStorage.setItem("userInput", userInput.textContent);
  console.log(localStorage.getItem("userInput"));
});

loadBtn.addEventListener("click", function () {
  if (localStorage.getItem("userInput")) {
    userInput.textContent = localStorage.getItem("userInput");
  }
});

Get input value from fieldset?

Question

1 answers

solution1
0 2022-08-09 02:25:06

Get input value from fieldset?

Question

1 answers

solution1 0 2022-08-09 02:25:06

solution1
0 2022-08-09 02:25:06