Getting undefined here. Any reason why?

Question

So I am currently making a chrome extension that allows you to set shortcuts to websites and go to them directly. But for some reason I am currently, here, getting undefined at the command1

Here is the code:

let current_url = document.getElementsByClassName("current_url");
let bg = chrome.extension.getBackgroundPage();
let url = ""
let storage = chrome.storage.sync
console.log(chrome)
console.log(bg)
console.log(bg.command1)
function adder(){
    for(elt of current_url) {
       switch(elt.innerHTML) {
           case "command1":
               chrome.storage.sync.get("key1", function(msg){url = msg.key1.toString(); console.log(msg.key1)});
               break;
           case "command2":
                 url = bg.command2;
                break;
           case "command3":
                url = bg.command3;
               break;
            case "command4":
                url = bg.command4;
                break;
       }
       elt.innerHTML = `${elt.innerHTML}       ${url}`;
       console.log(elt)
    }
}
adder()

.change-c{
    margin: 20px;
    background-color: grey;
    list-style: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script defer src= "app.js"></script>
</head>
<body>
    <ul class= "change-c">
        <p class= "current_url">command1</p><li><input type="text" class="enter"></li>
    </ul>
    <ul class="change-c">
        <p class= "current_url">command2</p><li><input type="text" class="enter"></li>
    </ul>
    <ul class="change-c">
        <p class= "current_url">command3</p><li><input type="text" class="enter"></li>
    </ul>
    <ul class= "change-c">
        <p class= "current_url">command4</p><li><input type="text" class="enter"></li>
    </ul>
    
</body>
</html>

So any ideas why this is happening? Like at console.log("msg.key1") it does say "https://www.youtube.com" but the variable "url" is undefined even though they are the same. Please help if u can

Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Ivar, Oct 28 '20 at 10:11
Try `textContent` instead of `innerHTML` maybe there are hidden characters there.. — Mosh Feu, Oct 28 '20 at 10:13
the problem is that I am getting the var "url" undefined, but innerhtml is working everywhere else — Saadusmani78, Oct 28 '20 at 10:19
When `command1`, you don't set the `url` variable, only in the other `case`s. — Mosh Feu, Oct 28 '20 at 10:22
@MoshFeu OP sets the `url` in the callback of `chrome.storage.sync.get`. (Hence it is a duplicate of the link I posted in my first comment.) — Ivar, Oct 28 '20 at 10:26

score 0 · Accepted Answer · answered Oct 28 '20 at 10:19

chrome.storage.sync.get is an asynchronous operation and when the value is retrieved it will invoke the function in the second parameter.

In your code you are reading the value of the variable right after calling this asynchronous function, so the value of the variable is still not set yet until the callback function is invoked.

To resolve this issue, either

set the innerHTML in the callback function or

OR

promisify the function, convert adder to async function and use await for the promise

Getting undefined here. Any reason why?

1 Answers1