Как сохранить значение из текстового поля HTML с помощью локального хранилища Javascript? - PullRequest
Новая
       0

Как сохранить значение из текстового поля HTML с помощью локального хранилища Javascript?

0 голосов
/ 13 сентября 2018

Это метод, который я попробовал. Я добавил отзыв только для того, чтобы проверить, содержит ли переменная JavaScript siteName значение из значения текстового поля HTML, но вместо этого он отражает «[object HTMLInputElement]». Есть идеи почему? 

<!DOCTYPE html>
<html>
    <head>
        <title>Storing HTML value into Javascript local storage</title>
    </head>
    <body>
        <h1 id="2ndid">Hello</h1>

       <input type="text" id="firstid">
       <button onclick="myFunction()">LocalStorage</button>
       <button onclick="myFunction2()">Feedback</button>  

       <script type="text/javascript">
           var siteName = document.getElementById('firstid');
           function myFunction() {
               localStorage.setItem('store1', siteName);
           }
           function myFunction2() {
               document.getElementById("2ndid").innerHTML = siteName;
           }
       </script>
    </body>
</html>

Ответы [ 4 ]

0 голосов
/ 13 сентября 2018

Вы не инициализируете свою переменную.

здесь рабочий код. 

<!DOCTYPE html>
<html>
    <head>
        <title>Storing HTML value into Javascript local storage</title>
    </head>
    <body>
        <h1 id="2ndid">Hello</h1>

       <input type="text" id="firstid">
       <button onclick="myFunction()">LocalStorage</button>
       <button onclick="myFunction2()">Feedback</button>  

       <script type="text/javascript">
           var siteName;
           function myFunction() {
           siteName= document.getElementById('firstid').value;
               localStorage.setItem('store1', siteName);
           }
           function myFunction2() {
               document.getElementById("2ndid").innerHTML = siteName;
           }
       </script>
    </body>
</html>
0 голосов
/ 13 сентября 2018

Вы должны использовать свойство value, чтобы получить фактический текст из ввода. В противном случае он вернет ссылку на поле ввода текста. Ссылка имеет тип HTMLInputElement, который имеет свойство value, содержащее фактические данные, введенные в текстовое поле. 

<!DOCTYPE html>
<html>
<head>
<title>Storing HTML value into Javascript local storage</title>
</head>
<body>
   <h1 id="2ndid">Hello</h1>

   <input type="text" id="firstid">
   <button onclick="myFunction()">LocalStorage</button>
   <button onclick="myFunction2()">Feedback</button>  

<script type="text/javascript">
    var siteName;
    function myFunction() {
         siteName = document.getElementById('firstid').value;
         localStorage.setItem('store1', siteName);
    }
    function myFunction2() {
        document.getElementById("2ndid").innerHTML = siteName;
    }

</script>

</body>
</html>

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

0 голосов
/ 13 сентября 2018

Это довольно простое исправление, вам просто нужно добавить свойство value в конце второй функции. 

function myFunction2() {
      document.getElementById("2ndid").innerHTML = siteName.value;
}
0 голосов
/ 13 сентября 2018

Используйте value элемента ввода для извлечения значения из его формы, иначе вы получите объект. 

document.getElementById("2ndid").innerHTML = siteName.value;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...