1. ホーム
  2. javascript

[解決済み] 文字列を変数に連結するには?

2023-02-21 03:03:40

質問

文字列と渡された変数(数字)から文字列を作ろうとしています。 どのようにそれを行うのですか?

私はこのようなものを持っています。

function AddBorder(id){
    document.getElementById('horseThumb_'+id).className='hand positionLeft'
}

では、その「horseThumb」とidを1つの文字列にするにはどうしたらいいのでしょうか?

私はすべての様々なオプションを試してみました、私はまた、グーグル、私は次のように文字列に変数を挿入することができることを学びました。 getElementById("horseThumb_{$id}") <-- (私にはうまくいきませんでした。なぜかはわかりません) 私は何も有用なものを見つけられませんでした。だから、どんな助けでも非常に感謝されます。

どのように解決するのですか?

あなたのコードは正しいです。おそらく、あなたの問題は、ID を AddBorder 関数に ID を渡していないか、その ID を持つ要素が存在しないことです。あるいは、問題の要素がブラウザの DOM を通じてアクセスできるようになる前に関数を実行している可能性もあります。

ECMAScript 2015 以降は、以下のように テンプレートリテラル(別名:テンプレート文字列) :

document.getElementById(`horseThumb_${id}`).className = "hand positionLeft";

1番目のケースを特定したり、2番目のケースの原因を特定したりするには、関数内の最初の行としてこれらを追加します。

alert('ID number: ' + id);
alert('Return value of gEBI: ' + document.getElementById('horseThumb_' + id));

これにより、この関数が呼ばれるたびにポップアップウィンドウが開き、その中にある id の値、そして戻り値が document.getElementById . もし undefined と表示された場合、関数に引数を渡していないことになります。IDが存在しない場合、最初のポップアップであなたの(不正確な?)ID番号を取得することになりますが、その際 null が表示されます。

3番目のケースは、あなたのウェブページが次のようなものであった場合、実行しようとする AddBorder を実行しようとすると、ページがまだロード中である場合に起こります。

<head>
<title>My Web Page</title>
<script>
    function AddBorder(id) {
        ...
    }
    AddBorder(42);    // Won't work; the page hasn't completely loaded yet!
</script>
</head>

これを解決するには、AddBorder を使用するすべてのコードを onload イベントハンドラ内に置いてください。

// Can only have one of these per page
window.onload = function() {
    ...
    AddBorder(42);
    ...
} 

// Or can have any number of these on a page
function doWhatever() {
   ...
   AddBorder(42);
   ...
}

if(window.addEventListener) window.addEventListener('load', doWhatever, false);
else window.attachEvent('onload', doWhatever);