How to call function Javascript when i need run?

Question

This is run automatic. i need it run when call window.onload, not run before call window.onload, because i want to create function as a template code to embed other side, just change id, or className input Thanks

function changeResultBox(resultTextClassName,inputSearchToggleId){
  var inputSearchToggle=document.getElementById(inputSearchToggleId),
  resultText=document.getElementsByClassName(resultTextClassName);
  
  resultText[0].innerHTML='"'+inputSearchToggle.value+'"';
  resultText[1].innerHTML='"'+inputSearchToggle.value+'"';
 }
  
window.onload=function(){
document.getElementById('Store-Page-Search-Input').onkeyup = 
changeResultBox('search-bar-item__text','Store-Page-Search-Input');
}

<input type="text" id="Store-Page-Search-Input" class="search-bar__input" name="txtsearchbar" placeholder="Find product, find shop,..." autocomplete="off" value=""/>

<div class="search-bar-item">
    <div class="search-bar-item__title">find product&nbsp;</div>
    <div class="search-bar-item__text"></div>
</div>
                
<div class="search-bar-item">
  <div class="search-bar-item__title">find shop&nbsp;</div>
  <div class="search-bar-item__text"></div>
</div>

window.onload is basically asking for the function to run when the window loads. I really do not understand your question, try giving a name to your javascript function and call it whenever you like? — Farhan Qasim, Jun 23 '18 at 14:04
pls see it https://codepen.io/anon/pen/YvvxYO , it is run automatic and show text, i just want it show when i click button, this funciton did compiler and run automatic then show — Quang Dao Van, Jun 23 '18 at 14:19

Nandita Sharma · Accepted Answer · 2018-06-23T14:45:35.120

Bind event on the input itself onkeyup="changeResultBox('search-bar-item__text','Store-Page-Search-Input')".

<input type="text" id="Store-Page-Search-Input" class="search-bar__input" name="txtsearchbar" placeholder="Find product, find shop,..." autocomplete="off" value="" onkeyup="changeResultBox('search-bar-item__text','Store-Page-Search-Input')" />

function changeResultBox(resultTextClassName, inputSearchToggleId) {

  var inputSearchToggle = document.getElementById(inputSearchToggleId),
    resultText = document.getElementsByClassName(resultTextClassName);

  resultText[0].innerHTML = '"' + inputSearchToggle.value + '"';
  resultText[1].innerHTML = '"' + inputSearchToggle.value + '"';
}

<input type="text" id="Store-Page-Search-Input" class="search-bar__input" name="txtsearchbar" placeholder="Find product, find shop,..." autocomplete="off" value="" onkeyup="changeResultBox('search-bar-item__text','Store-Page-Search-Input')" />

<div class="search-bar-item">
  <div class="search-bar-item__title">find product&nbsp;</div>
  <div class="search-bar-item__text"></div>
</div>

<div class="search-bar-item">
  <div class="search-bar-item__title">find shop&nbsp;</div>
  <div class="search-bar-item__text"></div>
</div>

function changeResultBox(resultTextClassName, inputSearchToggleId) {
  //var resultTextClassName = 'search-bar-item__text';
  //var inputSearchToggleId = 'Store-Page-Search-Input';
  var inputSearchToggle = document.getElementById(inputSearchToggleId),
    resultText = document.getElementsByClassName(resultTextClassName);

  resultText[0].innerHTML = '"' + inputSearchToggle.value + '"';
  resultText[1].innerHTML = '"' + inputSearchToggle.value + '"';
}

window.onload = function() {

  document.getElementById("Store-Page-Search-Input").addEventListener("keyup", changeResultBox.bind(event, 'search-bar-item__text', 'Store-Page-Search-Input'));

}

<input type="text" id="Store-Page-Search-Input" class="search-bar__input" name="txtsearchbar" placeholder="Find product, find shop,..." autocomplete="off" value="" />

<div class="search-bar-item">
  <div class="search-bar-item__title">find product&nbsp;</div>
  <div class="search-bar-item__text"></div>
</div>

<div class="search-bar-item">
  <div class="search-bar-item__title">find shop&nbsp;</div>
  <div class="search-bar-item__text"></div>
</div>

why i can't use inputId.addEventListener('keyup',changeResultBox('search-bar-item__text','Store-Page-Search-Input'),false), it not working as use onkeyup in html? — Quang Dao Van, Jun 23 '18 at 14:30
Check the second snippet. I have corrected what you are doing. Apparently what you are doing isnt the right way of doing it. I checked this answer https://stackoverflow.com/questions/256754/how-to-pass-arguments-to-addeventlistener-listener-function and used it to fix your issue. — Nandita Sharma, Jun 23 '18 at 14:46

How to call function Javascript when i need run?

1 Answers1