How to display localStorage value in a table header?-CodePudding

I have the following js function that is used to get the saved value of an input field:

function getSavedValue(e) {
    if (!localStorage.getItem(e)) {
        return "";
    }
    return localStorage.getItem(e);
}

The following is an example of how I use this js function:

var paymentMonth = document.getElementById("monthHR_PaymentMonth");

paymentMonth.value = getSavedValue("monthHR_PaymentMonth");

How can I use this function to grab the paymentMonth value and display it in a table column header?:

<th>Payment May 2022</th>

Where May 2022 is the value saved.

CodePudding user response：

How can I use this function to grab the paymentMonth value and display it in a table column header?: You can try to add an id to the <th></th>:

<th id="monthHR_PaymentMonth"></th>

and then use the following code to add text to it:

$("#monthHR_PaymentMonth").append(getSavedValue("monthHR_PaymentMonth"));

CodePudding user response：

You need the element to have an id attribute in order to get it with the getElementById function. So add an id to the <th>, then use the textContent property to add text to it:

var paymentMonth = document.getElementById("monthHR_PaymentMonth");

paymentMonth.textContent = getSavedValue("monthHR_PaymentMonth");

CodePudding user response：

const paymentMonth = document.getElementById("monthHR_PaymentMonth");
paymentMonth.innerText = getSavedValue("monthHR_PaymentMonth");

use innerText!