How to permanent change html text after a submitted has been triggered-CodePudding

Im currently trying to find out if its possible to change a text in extension when a submit has happend. I currently have a text saying "ENTER DISCORD USER ID AND SUBMIT" and when an user has entered its USER ID and submitted, the text should be changed to "USER ID SUBMITTED" and the text should always say that afterwards, meaning that if someone closes and opens the extensions - the text should still say "USER ID SUBMITTED".

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="../css/style.css">
    <script src="../js/popup.js"></script>
</head>

<body>
    <div >
        <form id="form" >
            <label> <input type="number" id="discord-id-input" name="discord-id-input"></label>
            <button id="discord-id-button" type="submit" ></button>
            <output id="help-text"  value="">ENTER DISCORD USER ID AND SUBMIT</output>
        </form>
    </div>
</body>

function get_discord_id(callback) {
    chrome.storage.sync.get(["discord_id"], (result) => {
        callback(result.discord_id);
    });
}

function set_discord_id(discord_id) {
    chrome.storage.sync.set({ discord_id: discord_id }, () => {});
}

window.addEventListener("DOMContentLoaded", (e) => {
    // check if discord ID is already stored
    get_discord_id((discord_id) => {
        if (discord_id == null) {
            form.addEventListener('submit', () => {
                let value = document.getElementById("discord-id-input").value;

                chrome.runtime.sendMessage({ discord_id: value }, function(response) {});

                set_discord_id(value);
                document.getElementById('help-text').innerHTML = 'USER ID SUBMITTED';
            });
            e.preventDefault();
        };
    });
});

I wonder how I am able to permanent change a text after a submitted trigger has happend?

CodePudding user response：

Since you already store the discord_id and retrieve it when the popup window is opened, you can determine whether the id has been submitted based on the presents of discord_id.

Here is the updated JS code to do that

function get_discord_id(callback) {
    chrome.storage.sync.get(["discord_id"], (result) => {
        callback(result.discord_id);
    });
}

function set_discord_id(discord_id) {
    chrome.storage.sync.set({ discord_id: discord_id }, () => {});
}

window.addEventListener("DOMContentLoaded", (e) => {
    // check if discord ID is already stored
    get_discord_id((discord_id) => {
        if (discord_id) {
           document.getElementById('help-text').innerHTML = 'USER ID SUBMITTED';
        } else {
            form.addEventListener('submit', () => {
                let value = document.getElementById("discord-id-input").value;

                chrome.runtime.sendMessage({ discord_id: value }, function(response) {});

                set_discord_id(value);
                document.getElementById('help-text').innerHTML = 'USER ID SUBMITTED';
            });
            e.preventDefault();
        };
    });
});