[解決済み] 文字列を変数に連結するには?
質問
文字列と渡された変数(数字)から文字列を作ろうとしています。 どのようにそれを行うのですか?
私はこのようなものを持っています。
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);
関連
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] JavaScriptで文字列をbooleanに変換するにはどうしたらいいですか?
-
[解決済み] JavaScriptの正規表現でマッチしたグループにアクセスするにはどうすればよいですか?
-
[解決済み】別のウェブページにリダイレクトするにはどうすればいいですか?
-
[解決済み】JavaScriptで文字列の出現箇所をすべて置換する方法
-
[解決済み] Chromeの拡張機能開発にWebStormを使用するにはどうすればよいですか?
-
[解決済み] JavaScriptデータフォーマット/プリティプリンタ
-
[解決済み] JavaScriptでDIVを表示・非表示にするには?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] 上級者向けJavaScript。この関数はなぜ括弧でくくられるのですか?重複
-
[解決済み] WebStormで未解決の変数が大量にある場合の警告に対処する方法は?
-
[解決済み] React js 親コンポーネントから子コンポーネントの状態を変更する
-
[解決済み] Reactコンポーネントでthis.setStateを複数回使用するとどうなりますか?
-
[解決済み] TypeScriptプロジェクトで既存のC#クラス定義を再利用する方法
-
[解決済み] ECMAScriptとは?
-
[解決済み] モデルフェッチ時に1をtrueに、0をfalseに変換する方法
-
[解決済み] JavaScriptで長い配列を小さい配列に分割する方法
-
[解決済み] JavaScriptの文字列プリミティブとStringオブジェクトの違いは何ですか?
-
[解決済み] これは純関数ですか?