JavaScript 以下のjavascriptを短縮

Question

<div id="box"></div>

#box{
    position: relative;
    
    width: 100%;
    height: 500px;
}
#box div{
    position: absolute;
    
    background-color: black;
    
    width: 100px;
    height: 200px;
}

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

box.innerHTML += '<div id="character' + 1 +'">';
box.innerHTML += '<div id="character' + 2 +'">';
box.innerHTML += '<div id="character' + 3 +'">';

var character1 = document.getElementById("character" + 1);
var character2 = document.getElementById("character" + 2);
var character3 = document.getElementById("character" + 3);

(function update1(){
    
    setTimeout(update1, Math.floor( Math.random() * 10000));
    
    character1.style.left = Math.floor( Math.random() * window.innerWidth) + "px";
})();
(function update2(){
    
    setTimeout(update2, Math.floor( Math.random() * 10000));
    
    character2.style.left = Math.floor( Math.random() * window.innerWidth) + "px";
})();
(function update3(){
    
    setTimeout(update3, Math.floor( Math.random() * 10000));
    
    character3.style.left = Math.floor( Math.random() * window.innerWidth) + "px";
})();

• 同じスクリプトを短縮し,変数で出現数を変えられる
• アップデート関数のみ、それぞれに一つずつ設定したい
• 質問内容が不十分であればコメントを下さい

完成イメージ

• 上が悪い例で下が良い例です

Answer 1

こゆことしたいの？？？

function update(element) {
  return function(){
    setTimeout(update(element), Math.floor( Math.random() * 10000));
    element.style.left = Math.floor( Math.random() * window.innerWidth) + "px";
  };
}
update(document.getElementById("character" + 1));
update(document.getElementById("character" + 2));
update(document.getElementById("character" + 3));

Comments

[konkuro1007]

そうです、でもこれで動かないのはなぜですか?

window.onload = function(){

var box document.getElementById("box");

box.innerHTML += '<div id="character' + 1 +'">';
box.innerHTML += '<div id="character' + 2 +'">';
box.innerHTML += '<div id="character' + 3 +'">';

update(document.getElementById("character" + 1));
update(document.getElementById("character" + 2));
update(document.getElementById("character" + 3));
}
function update(element) {
return function(){
setTimeout(update(element), Math.floor( Math.random() * 10000));
element.style.left = Math.floor( Math.random() * window.innerWidth) + "px";
};
}

[退会済みユーザー]

setTimeoutの場合引数を渡せないからだと思います。
update(element)の部分をfunction(){update(element)}にすればいける・・・かも？
すみません未確認です。

[konkuro1007]

動きませんでしたが、でもまぁ頑張ってみます

[tkturbo]

ちなみに「update(element)」はクロージャで戻り値はfunctionですから引数は反映されているはずです。>>hidee2e3rさん。
「update(document.getElementById("character" + 1));」だとfunctionオブジェクトが返ってくるだけでした。
window.onloadの中では「document.getElementById("character" + 1))();」としてfunction実行させてあげる必要がありました。申し訳ない。>>koonkuro1007さん

[konkuro1007]

ありがとうございます、解決しました。