我需要运行时如何调用函数Javascript?

时间:2018-06-23 14:01:33

标签: javascript css dom

这是自动运行。我需要在调用window.onload时运行它,而不是在调用window.onload之前运行,因为我想创建函数作为模板代码来嵌入另一面,只需更改id或className输入 谢谢

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>

1 个答案:

答案 0 :(得分:0)

对输入本身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>