I'm new in learning JavaScript. Just for some test I built this function and call it and assign a variable in it to complete result. Is there any way use function like this example?

Here I wanna just pass #country in dom(i) function. so it should be getElementById("maid"), and after call it, assign = maid to put this maid variable after innerHTML =

I'm wondering is it possible to write JavaScript function like this way?

var maid = "Made In Yiappa";
function dom(i) {
    var docs = document.getElementById(i).innerHTML;
    return docs;
}
dom("country") = maid;

<p> The result is: <span id="country"></span> </p>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You must pass it as argument to that function:

var maid = "Made In Yiappa";
function dom(elementId, txt) {
    document.getElementById(elementId).innerHTML = txt;
}
dom("country", maid);

<p> The result is: <span id="country"></span> </p>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can’t assign a value to the result of a function call. You need to pass it as a function argument.

var maid = "Made In Yiappa";
function dom(i, text) {
    document.getElementById(i).innerHTML = text;
}
dom("country", maid);

<p> The result is: <span id="country"></span> </p>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

1. The key issue is that you're returning the value of the innerHTML property from the function but you can't then assign a string to it because innerHTML can only be set when it's attached to an element.

2. querySelector maybe a better method choice. You can then pass in your #country selector as you mentioned in your question.

3. So, we can remove some of the functionality from the function, and just have it return the element using the selector. Then we can assign main to the innerHTML of that returned element (although innerText might be more appropriate).

var maid = 'Made In Yiappa';

function dom(selector) {
  return document.querySelector(selector);
}

dom('#country').innerText = maid;

<p> The result is: <span id="country"></span> </p>

<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

I’m not entirely sure that stackDB answers here is completely correct but am willing to be shown otherwise. The reasons being

1. No closure is created here as no function has been returned nor called by an event listener. I know all functions close over variables within the outer scope but this could create confusion to the op of the general use of a closure. I.e a returned inner function using a local variable inside the function even after the outer function has finished execution.
2. You state the op MUST assign the function to a variable. This too I believe is not accurate. A function declaration will do the job here, a function expression in this case is optional. Again this may create confusion to the op’s understanding of hoisting and differences between function declarations and expressions.

Unfortunately I am not in a position to write code to the op.