I have a table that localstorage value is saved and displayed in the th.
I want to write a function that will delete the text of the localstorage and open input field on click. I tried something like this:
<html>
<body>
<table style="float: right ; padding-left: 10px;" id="table">
<tr>
<th id="hello" style="padding-left:24px; text-align: center;" class="button" id="0"><input id="inside" name="inside" type="text" ></th>
</table>
<button onclick="again();">again</button>
<script>
function again() {
document.getElementById("hello").innerHTML=input;}
</script>
</body>
</html>
but it doesn't work. Can somebode explain what is the mistake? thank you very much!
Your function again() is setting the innerHTML of the th to the value of a variable called input (that does not exist).
You have to extract the value of the input field and write that (string) as the innerHTML of the head. Try this:
function again(){
const tableHeaderElement = document.getElementById("hello");
const userEnteredData = tableHeaderElement.getElementsByTagName('input')[0].value;
tableHeaderElement.innerHTML = userEnteredData;
}the second statement is retrieving an HTMLCollection of input tags inside the header. Your HTMLcollection will only have one member but must be referenced by index, like an array, hence [0]. Obviously .value extracts the value property of that element, which is the text entered by your user.
Depending on use, there may be security concerns about adding user-entered data into an html element as, if they entered script tags and valid javascript, they might be able to do things you don't want them to. It is usual to either screen user-entered data, 'sanitise it', to remove active code, or, easier but soon to be deprecated, escape data before writing it to an html element.