HTML Log System with javascript or maybe php

Hi I tried to make a log system panel to my website. The code is works fine because if you write the text into the input field it will show up. But if you reload the page it will disappear. So my problem is the disappearing text. I want to do this when I type the text so it doesn’t disappear when the page refreshes. Any idea how to do this? Also I wanna do that if you type the text into the input field and press the add button the text that you typed will appear on other page. I mean there is a page in /log/edit/index.html and the text sould appear on the /log/view/index.html site. I know it’s basically and impossible task but I think It might be possible if the text that you typed into the textfield goes into a .txt file and save it to /log/logs.txt then the /log/view/index.html reads it and show the text from the txt file. I hope you understand some of what I want to say Heres the code:

function newElement() {
  var li = document.createElement("li");
  var inputValue = document.getElementById("myInput").value;
  var t = document.createTextNode(inputValue);
  li.appendChild(t);
  if (inputValue === '') {
    alert("Invalid log! You must write something");
  } else {
    document.getElementById("myUL").appendChild(li);
  }
  document.getElementById("myInput").value = "";
}

ul {
margin: 0;
padding: 0;
}

/* Style the list items */
ul li {
cursor: pointer;
position: relative;
padding: 12px 8px 12px 40px;
list-style-type: none;
background: #eee;
font-size: 18px;
transition: 0.2s;

/* make the list items unselectable */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

/* Set all odd list items to a different color (zebra-stripes) */
ul li:nth-child(odd) {
background: #f9f9f9;
}

/* Darker background-color on hover */
ul li:hover {
background: #ddd;
}

/* Style the header */
.header {
background-color: #0d1426;
padding: 30px 40px;
color: white;
text-align: center;
}

/* Clear floats after the header */
.header:after {
content: "";
display: table;
clear: both;
}

/* Style the input */
input {
margin: 0;
border: none;
border-radius: 0;
width: 75%;
padding: 11px;
float: left;
font-size: 16px;
}

/* Style the "Add" button */
.addBtn {
padding: 13px;
width: 250px;
background: #d9d9d9;
color: #555;
float: left;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
border-radius: 0;
border-bottom: 1px solid transparent;
}

.addBtn:hover {
background-color: #bbb;
}

    <div class="addlog">
        <div id="myDIV" class="header">
          <h2 style="margin:5px">Update Logs</h2>
          <input type="text" id="myInput" placeholder="Log" maxlength="112">
          <span onclick="newElement()" class="addBtn">Add</span>
        </div>

        <ul id="myUL">

        </ul>
    </div>

Answer

If you want to save log into a txt file, then check out this and https://www.geeksforgeeks.org/javascript-program-to-write-data-in-a-text-file/

Advertisement

Answer