JavaScript

全16008件中161～180件表示
  • JavaScript のTypeError

    Uncaught TypeError: Cannot read properties of null (reading 'appendChild') at add というエラーで困っています。 初心者向け動画 https://www.youtube.com/watch?v=E08jeQBa1D0 さんでそのままのコードを打ったつもりですが、「テキストボックスに文字を入れて、エンターを押すと値がリストに追加されていく」という動きができません。 コードはこちらです。（動画のままを打ったつもりです） [HTML] <body class="bg-light"> <div class="container w-75"> <h1 class="text-center text-info my-4"> todo</h1> <form id="form" class="mb-4"> <input type="text" id="input" placeholder="todoを入力" autocomplete="off" class="form-control"> </form> <ul class="list-group text-secondary"></ul> </div> <script src="index.js"></script> </body> [JS] const form = document.getElementById("form") const input = document.getElementById("input") const ul = document.getElementById("ul") form.addEventListener("submit", function (event) { event.preventDefault() console.log(input.value) add() }) function add() { const li = document.createElement("li") li.innerText = input.value li.classList.add("List-group-item") ul.appendChild(li) //ここでエラー input.value = "" } HTMLを生成するときにulがなくて追加できない、という意味であってるでしょうか。 何が原因なのか知りたいです。

  • div要素で定義された配列変数間の値引き渡し

    div要素のid名と値を配列[id名,値]で定義して、親htmlと子iframe間で同名の変数の引き渡しを行なっています。 数が多いのでfor文で実施したいのですがうまくいきません。 間違いを正していただけませんでしょうか。 var arr = [ ["b01", b01], ["b02", b02], ["b03", b03], 　　　・ 　　　・ ]; // iframeの呼び出し var doc = document.getElementsByTagName("iframe")[0].contentWindow; // iframe内div要素の値取得、親の変数に代入 for (var i = 0; i < arr.length; ++i) { arr[i][1] = doc.document.getElementById(`"${arr[i][0]}"`).innerHTML; } 意図としては上のような形にしたいのですが、これではうまくいきません。 おそらく`"${arr[i][0]}"`の部分がいけないのだと思います。 alert(`"${arr[0][0]}"`)の結果は意図どおり"b01"と出力されます。 もちろん以下であれば変数がきちんと渡ります。 var b01 = doc.document.getElementById("b01").innerHTML; var b02 = doc.document.getElementById("b02").innerHTML; var b03 = doc.document.getElementById("b03").innerHTML; 　　　・ 　　　・ よろしくお願いします。

  • postMessageによるiframeの書き換え

    iframeに表示している自身のブログを作成・修正するスクリプトを考えていますがうまくいきません。 「contentWindowで取得した変数の属性は読み取り専用なので、変数を操作するにはpostMessageを使う必要がある」といった記事があったので、自分なりにスクリプトを書いてみました。以下が、そのサンプルです。 親のparentから子のiframeに変数var1をpostMessageで送り、子側で変数var1を使ってoutputの内容を書き換えています。 しかし、これだとcontentWindowで変数を取得・操作を行なった場合と何ら変わらない結果になってしまいます。 つまりiframe.htmlを直接ブラウザで開いて表示しても、outputの表示内容が書き換わっていません。 どこに誤りがあるのでしょうか。 それとも「読み取り専用」に関する私の理解が間違っているのでしょうか。 <html lang="ja"> <head> <meta charset="UTF-8" /> <title>parent</title> </head> <body> <iframe id="iframe" src="iframe.html"></iframe></br> 天気<input type="text" id="var1" value=""> <input type="button" id="build" onclick="send()" value="データ送付"> <script type="text/javascript"> function send(){ var win = document.getElementById("iframe").contentWindow; win.postMessage(document.getElementById("var1").value, '*'); } </script> </body> </html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>iframe</title> </head> <body> <p>タイトル</p> <div id="output"></div> <div id="var1"></div> <script type="text/javascript"> window.addEventListener('load', function(){ var var1 = "晴れ"; build(var1); }); function onMessage(e) { var var1 = e.data; build(var1); } window.addEventListener("message", onMessage, false); function build(var1) { var output = "きょうは" + var1 + "です。"; document.getElementById("output").innerHTML = output; } </script> </body> </html>

  • 自分のURLアドレスのパラメータを取得して使用する

    済みません、既に同じ質問「javascriptの変数を渡す方法について」をさせて頂いていますが、簡素にしましたのでよろしくお願い致します。 【やりたい事】 自分のURLを仮に(bbb.asp?PARM1="hensu")として、URLから取得したパラメータを変数として使用したいのですが ほぼ初心者なので思い通りに行かず悶々と悩んでいます。 どなたか、そもそも論も含めてでも結構ですので、ヘルプまたは参考サイトをご教示ください。 【現在の状況】 ①bbb.asp?PARM1="hensu"からjavascriptで変数(P_hensu)として取得出来ています。 ②javascriptを抜け出すと変数(P_hensu)の値は入っていません。 (bbb.aspのソース概略) <%@ LANGUAGE=VBScript %> <% Option Explicit %> <script type="text/javascript"> /* パラメータ(PARM1)を取得する */ const searchParams = new URLSearchParams(window.location.search); var P_hensu = searchParams.get('PARM1'); </script> <% '上段で取得した変数(P_hensu)をここで使いたいのですが持ってこれません。 call prog1(P_hensu) %> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head> </html>

  • サブライムテキストでディレクトリ検索をしたい

    コントロール シフト f をおすとエバーノートが出てきてほかのアプリで使えません サブライムテキストでディレクトリ検索をしたいのにこれが出てきます。 windows10です 何とかならないのでしょうか？ ディレクトリ検索がしたいです

  • JavaScriptで日付の差分を求める方法

    var day1 = new Date("2022/10/14"); var day2 = new Date("2020/06/23"); var termDay = (day2 - day1) / 86400000; これで、日数の差分が求められるんですが、それを「yyyy/mm/dd」にする方法を教えてくください。

  • 二つのform分について

    <form action="./test.cgi" method="POST"> <div>テスト:<input type="text" size="70" name="keyword" value=""></div> <input type="submit" value="OK"> </form> <FORM method="post" action="#"> 外側だけですが、遊んでくださいね１６進数で!!!! <INPUT tabindex="10" accesskey="x" value="" name=BGC size=7> <INPUT tabindex="20" accesskey="x" onclick="document.bgColor='#' + document.forms[0].BGC.value" onkeypress="document.bgColor='#' + document.forms[0].BGC.value" type=button value="色変更"> </FORM> どちらも一つずつだと正常に動作します。 何か同じものが二つあるのでしょうか 何かが重複しているので 最初のformは動くけど、 2番目のformが動かないのでしょうね。 どうすれば二つとも動くでしょうか。 よろしくお願いいたします。

  • showModalDialogの代替について

    当然ながら、window.returnValue、これ一行で親は子画面からの情報は入手出来ましたが、IE廃止に伴って、callback関数に変更して対応しました。 それで一つ問題がありまして、キャンセルの情報を入手したいです。 子画面.htmlの中の画面情報。（簡素化するため短めに編集しました） *************************************************************** <input size="30" type="password" id="addr_pass" value=""> <input type="button" value="OK" onClick="check()"> <input type="button" value="キャンセル" onclick="window.close();"> *************************************************************** 子画面.jsの中身 *************************************************************** var callbackid = window.name; var returnValue = { addr_pass: document.getElementById('addr_pass').value }; window.opener[callbackid](returnValue); window.close(); ******************************************************************* addr_passの入力情報は親.htmlに返す事は可能になりましたが 親.htmlにキャンセル情報を返すためには、何かしら必要になると思いますが、どのようにすれば宜しいでしょうか。 よろしくお願いいたします。 追記。 showModalDialogは便利なのに需要がないのはわかりますけどね。

  • input値をボタンでoutput表示する方法

    質問の内容が分かりにくかったので再質問させていただくことにしました。 現在公開しているホームページで、うまく作動しない箇所が見つかり対応に苦慮しています。 問題点を分かりやすくするために、inputした値をGoボタンでoutputに出力表示する簡単なサンプルに落とし込んでみました。 output1はfunction go()内、output2はfunction go()外での出力表示です。 output2の要件として、htmlが開かれた時にはinputの初期値を、Goボタンでinputを更新した時はその値を表示したいのですが、初期値のまま更新できません。 参考チェック用のoutput1には正しく表示されます。 解決方法を教えていただけると助かります。 <html> <head> <title>input-output</title> </head> <body> <p> <label for="input">input</label> <input type="number" id="input" value="100"> </p> <p> <input type="button" onclick="go();" value="Go"> </p> <p> <label for="output1">output1</label> <input type="text" id="output1"> </p> <p> <label for="output2">output2</label> <input type="text" id="output2"> </p> <script> var input; go(); function go() { input= document.getElementById("input").value; var output = document.getElementById("output1"); output.value = input; } var output = document.getElementById("output2"); output.value = input; </script> </body> </html>

  • input値をボタンでoutput表示 Edgeで

    現在公開しているホームページで、Firefoxでは作動するのにEdgeでは作動しない箇所が見つかり対応に苦慮しています。 問題点を分かりやすくするために、inputした値をGoボタンでoutputに表示するだけの簡単なサンプルに落とし込んでみました。 <html> <p> <label for="input">input</label> <input type="number" id="input" value="100"> </p> <input type="button" onclick="location.reload();" value="Go"> <p> <label for="output">output</label> <input type="number" id="output"> </p> <script> var input= document.getElementById("input").value; var output = document.getElementById("output"); output.value = input; </script> </html> 基本シロウトなので正確なことは分かりませんが、ブラウザ間でreloadの仕様が異なり、Edgeではreloadにより表示画面がリセットされてしまうことが原因のようです。 解決策、またreloadを使用しないもっと良い方法などありましたら教えてください。 よろしくお願いいたします。

  • 2つのセレクトボックスで選択した組み合わせの結果

    社内で個人的に使うためのツールを Google Sites で作成中なのですが、 できれば、セレクトボックスの組み合わせの結果はテキストではなく、 条件に一致した結果でのフローをまとめた画像やGoogleスライドを指定して、 各条件ごとに振り分けて表示させたいと考えています。 ネットで色々と検索しながら試行錯誤した結果、 <textarea> に画像やスライドを反映するのは不可と判断しておりますが、 なにか別の要素を指定することで可能な場合や、 その他に可能な方法があればご教示いただけますと幸いです！ コードは下記です。 </head> <!-- javascriptファイル --> <script type="text/javascript"> function check(f){ var arr={ "A":{"aaa":"Aとaaaを選択しました","bbb":"Aとbbbを選択しました"} ,"B":{"aaa":"Bとaaaを選択しました","bbb":"Bとbbbを選択しました"} }; var select1=f.elements["select1"].value; var select2=f.elements["select2"].value; f.elements["C"].value=(arr[select1] && arr[select1][select2])?arr[select1][select2]:""; } </script> <!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <body> <p class="title">該当する組み合わせを選択してください。</p> <form> <div class="cp_ipselect cp_sl01"> <select name="select1" onchange="check(this.form);"> <option value="">------ 選択肢①を選択してください ------</option> <option value="A">A</option> <option value="B">B</option> </select> </div> <div class="cp_ipselect2 cp_sl02"> <select name="select2" onchange="check(this.form);"> <option value="">------ 選択肢②を選択してください ------</option> <option value="aaa">aaa</option> <option value="bbb">bbb</option> </select> </div> <p class="title2">選択肢①と②の組み合わせの結果</p> <!-- 下の textarea 箇所に各組み合わせごとにテキストではなく、画像やスライドを表示したいです --> <textarea name="C"></textarea> </form> </div> </body> </html>

  • ■AutoHotKeyカーソル位置からドラッグ方法

    今あるカーソルの位置から、1~5ピクセルほど左クリックドラッグし、すぐに終了する、ということを行いたいです MouseClickDrag, LEFT, -1, -1 ,-1 ,-1,,R 合っているかわかりませんが、これを実行したら延々とドラッグ移動され続けてしまいます。 錯誤してもエラーが起きる為、Scriptにてご教示下さい。

  • ローディングアニメーションのロゴが消えないです。

    ローディングアニメーションを入れたいと思い、調べて、以下のサイトに辿り着いて、 サイトの一番下から２番目にある、「**跳ねるうさぎちゃん**」とういタイトルのローディングアニメーションのC◆DEOENで動く、HTML,css,jsの全てコピーして、起動してみたのですが、 サイトが読み込めれると、グレー色の背景はちゃんと消えるのですが、その他のロゴ（ウサギや卵、横線）のロゴ等が **消えずに動き続けてしまいます。** このロゴもちゃんと消えるようにしたいです。 多分javascriptの部分だと思うのですが、どう書いたらよいでしょうか？ 回答よろしくお願いいたします。 [一生見てられる...カワイすぎるローディングをCSSコピペで実装！ 【 アニメーション 】 - デシノン https://deshinon.com/2019/03/03/kawaii-loading-kopipe/ 跳ねるうさぎちゃん

  • QRcode.jsで生成したQRコードを画像で取得

    QRcode.jsを使い下記の下記のコードでQRコードを生成することが出来ます。しかし、そのコードをcanvasを使って画像として取得することは可能みたいですが、そのための方法が分かりません。検索してもjqueryを使用したのが多く占めただせさえjavascriptの素人には無理筋です。 <!DOCTYPE html> <html> <body> <div id="qrcode"></div> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script> <script type="text/javascript"> var qrcode = new QRCode(document.getElementById("qrcode"), { text: "https://github.com", width: 128, height: 128, colorDark : "#ffffff", colorLight : "#000000", correctLevel : QRCode.CorrectLevel.H }); </script> </body> </html> 最終的には、var image = canvas.toDataURL()の形にして渡したいと思っています。 どうかよろしくお願いいたします。

  • TempleMonkey 自動更新

    自動更新 TempleMonkeyにてそのまま使える記述でお願いします。 (function myloop(i) { setTimeout(function() { myfunc(); if (--i) myloop(i); },150000) })(1); function myfunc() { window.location.reload(true);} var myp = document.createElement("p"); myp.textContent = "Last update: " + (new Date()).toString(); $("#top").append(myp); この記述で指定のページを秒数指定で自動更新をしているのですが、そのページを操作中の場合はリロードをしなくする方法、もしくは秒数をリセットする記述をお願いします。 TempleMonkeyにてそのまま使える記述をお願いします。 #ユーザースクリプト #Javascript #Greasemonkeyスクリプト

  • 【ホームページ作成】パソコンでホームページを見てい

    【ホームページ作成】パソコンでホームページを見ていたら、キーボードの→ボタンを押すと次のページが表示されるサイトがありました。 あれはどうやっているのでしょうか？ 検索結果で表示されたページで１、２、３、・・・９９９と表示されて、キーボードの→ボタンを押したら、２ページ目、→、３ページ目とページが更新されて大変読みやすかったです。

  • ラジオボタンではなくセレクトボックスで表の表示切換

    セレクトボックスで表の表示非表示を選択できるようにしたいです。最初は非表示で。jsで。 以下はその分です。 どこを変えたらいいですか。 <script type="text/javascript"> function Click_idbbb() { 　　if (document.all.idbbb.checked==true) { 　　　　document.all.bbb.style.display = "block" 　　} else { 　　　　document.all.bbb.style.display = "none" 　　} } function Click_idccc() { 　　if (document.all.idccc.checked==true) { 　　　　document.all.ccc.style.display = "block" 　　} else { 　　　　document.all.ccc.style.display = "none" document.getElementById('lng').innerHTML=tmp2; document.getElementById('table').innerHTML=tmp3; } </script> <div> <p> <input id ="idbbb" type="checkbox" name="kakikukeko"onclick="Click_idbbb()">かきくけこ <input id ="idccc" type="checkbox" name="sashisuseso"onclick="Click_idccc()">さしすせそ </p> <div id="bbb" style="display:none;"> 　<table border="1" cellspacing="2" cellpadding="0"> 　　<tr><td>テーブル２<p></p></td></tr> 　</table> </div> <div id="ccc" style="display:none;"> 　<table border="1" cellspacing="2" cellpadding="0"> 　　<tr><td>テーブル３<p></p></td></tr> 　</table> </div>

  • functionはhtmlやjsに2度使えませんか

    functionはhtmlやjsに2度使えませんか。 要は、同じhtml分や、js内に2度使う、あるいは、複数jsを作って、その全部にfunctionキーを設定できるかと言うことです。 具体的には、 function sample() { //ここに処理を書いていく } function sample2() { //ここに処理を書いていく } といった使い方はできないかということですがどうでしょうか。

  • jsのif文で論理積と否定論理積は同時に使えますか

    jsのif文で論理積と否定論理積は同時に使えますか 使えるなら例文をお出しください。

  • jsで、inputタグを使わないで、答えを出す方法

    jsでinputタグを使うことの問題点は、改行されないことです。 <br>も/nも使いましたがだめでした。 つまり、誰も答えられないということですね。😡。 cssは使いたくないです。 inputタグ以外の方法をお教えいただきたいです。 <script type="text/javascript"> function kotae() { ten=0 if(f.q1.value == "松山市") {f.q1.style.backgroundColor="aqua ";ten = ten + 25} else f.q1.style.backgroundColor="red" if(f.q2.value == "高松市") {f.q2.style.backgroundColor="aqua ";ten = ten + 25} else f.q2.style.backgroundColor="red" if(f.q3.value == "名古屋市"){f.q3.style.backgroundColor="aqua ";ten = ten + 25} else f.q3.style.backgroundColor="red" if(f.q4.value == "金沢市") {f.q4.style.backgroundColor="aqua ";ten = ten + 25} else f.q4.style.backgroundColor="red" f.tokuten.value=ten //ここから if(f.tokuten.value ==100){f.rank.value = 'S'} else if(f.tokuten.value >=75){f.rank.value = 'A'} else if(f.tokuten.value >=50){f.rank.value = 'B'} else if(f.tokuten.value >=25){f.rank.value = 'C'} else if(f.tokuten.value <25){f.rank.value = 'D'} //ここまで } </script> <input type="button" name="b1" value="答え合わせ" onclick="kotae()"> <p> <input name=tokuten size="6">点 <!--HTMLここから--> <input name=rank size="6">ランク <!--HTMLここまで-->

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

カテゴリ