How to Limit Dynamic Code to 1 Iteration?

[Nathaniel10]

I have a form with several inputs. One has a sub-input based on the condition of the original input. An example is:

<input onChange="javascript:addRow()"/>

The JS function works.

function addRow() {
   Dynamic HTML code ...
}

However, if the original input is modified a second time, the JS function executes again and adds the dynamic code a second time. I don't want that. If the user needs to change the original input a second time I want to the function to fail to execute on that second or subsequent time.

Does anyone have experience with how to ensure that a JS function is executed only once per page load?

The straightforward methods of using a boolean are not working for me.

function addRow() {
if (alreadyAdded == 'true') {
   Dynamic HTML code ...
}}

Thanks in advance.

[pikpik]

Hi Nathaniel10,

I have a form with several inputs. One has a sub-input based on the condition of the original input. [...] If the user needs to change the original input a second time I want to the function to fail to execute on that second or subsequent time.

The ways I can think of handling this include using global variables, element properties, or removing the event listener after it runs once.

When I know what will be in the page, I tend to use the elements' properties as signals to myself of their states.

For example, I might try something like this:

<style>

  #model {

    display: none;

  }

</style>

<script>

  window.onload = start;

  function start () {

    document.getElementById ( "make" ).onchange = showModels;

  }

  function showModels () {

    var model = document.getElementById ( "model" );


    // If the input doesn't exist or we've already modified it,
    // then don't run the code.

    if ( ! model || model.style.block == "block" )

      return;


    // Make it visible

    model.style.display = "block";


    // Dynamic HTML code ... Update input ... etc.

  }

</script>

<form name="carSearchForm">

  <input name="make" id="make" />

  <input name="model" id="model" />

</form>

You'll notice that I used the CSS properties to know what's going on; that's for convenience. Depending on your perspective, a further improvement might be to swap and detect CSS classes instead.

I hope this helps,
pikpik

[Nathaniel10]

Hi pikpik,

Thanks for your reply. I needed something far simpler than what you suggested. I found that you are correct in using a global variable. I was able to achieve what I wanted with the following code.

alreadyAdded = 1;
function addRow() {
  if (alreadyAdded == 1) {
    Dynamic HTML code ... 
    alreadyAdded++;
  }  
}

After the original input is changed, the count variable is increased, and the function does not execute again until the page is reloaded. I don't think this is an elegant solution - the use of global variables is supposed to be avoided - but it works and it is simple.

[pikpik]

Hi Nathaniel10,

You're welcome. I'm glad you found something simpler; I think simpler is usually better.

Yes, I agree about avoiding global variables. But as long as the pros outweigh the cons, using them is not a bad idea. :)

Although, if you find yourself needing to manage this for multiple form elements, then it could be useful to store these sorts of status variables in a single global object. That would just be to keep the global namespace a little cleaner. For example:

window.usedFormElements = {
  elementA: 1,
  elementB: 1,
  ...
  elementN: 1
};

function addRowA() {
  if (usedFormElements.elementA == 1) {
    Dynamic HTML code ... 
    usedFormElements.elementA++;
  }  
}

Just an idea.

Thank you,
pikpik

[persianprez]

Use

continue;

[Troy III]

So you want a simple solution huh?
Here it is:

function addRow() {
   this.onchange = null;
   Dynamic HTML code ...
}

Have fun Nathaniel10