アフィリエイト広告を利用しています

2024年02月26日

生成AIが作成したソースコードを修正した。

クイズにラジオボタンから回答。三つのボタンから正解を選ぶ。問題の数は五個。
採点ボタンを押すと、正解した数を表示する。

このようなプログラムをGoogle bardに作成してもらった。




 // 質問部分は省略します。
 var answers = [0, 0, 0, 0, 0]; // 正答のインデックスを格納した配列
 var score = 0; // 正答数をカウントする変数

 // 答えをチェックして正答数を計算
 function checkAnswers() {
  var inputs = document.getElementsByTagName('input');
  for (var i = 0; i < inputs.length; i++) {
   if (inputs[i].checked) { // チェックが入っているものをチェック
   if (inputs[i].value == answers[i]) { // 正答と一致するものがあれば、スコアを加算
    score++;
   }
  }
 }
 // 正答数を表示
 document.getElementById('result').innerHTML = 'Correct Answers:' + score;



[採点]ボタンを押しても正答数が正しく表示されないので、。

checkAnswers()関数を自分で修正してみた。



 // 答えをチェックして正答数を計算
 function checkAnswers() {
  var j =0;
  var inputs = document.getElementsByTagName('input');
  for (var i = 0; i < inputs.length; i++) {
   if (inputs[i].checked) { // チェックが入っているものをチェック
   if (inputs[i].value == answers[j]) { // 正答と一致するものがあれば、スコアを加算
    score++;
   }
   j++;
  }
 }


正答数が正しく計算されるようになった。




posted by db-engineer at 00:00 | Comment(0) | Javascript

2022年12月29日

日時比較の落とし穴

予想外の結果



 var date_now = new Date(Date.now());
 var date_early = new Date("2022","12", "14", "23", "59", "59");

 if (date_now.getTime() < date_early.getTime()) {
  alert("Early");
 }



2022年12月28日にこのコードを実行すると、Earlyが表示されてしまう。
date_now.getTime()とdate_early.getTime()の値をチェックすると、
確かにdate_now.getTime()の方が小さい。
原因が分からず、困った。

日付の書式を変更



 var date_now = new Date(Date.now());
 var date_early = new Date("2022/12/14 23:59:59");

 if (date_now.getTime() < date_early.getTime()) {
  alert("Early");
 }



2022年12月28日にこのコードを実行すると、Earlyは表示されない。
根拠があって日付の書式を変更したのではなく、
試しにやってみたら希望する結果が返ってきただけ。






posted by db-engineer at 00:00 | Comment(0) | Javascript

2022年12月08日

innerHTML

innerHTMLは画面に表示する文字を指定するものだと思っていた。

文字だけでなく、HTML要素も指定できた。


 <!DOCTYPE html>
 <html lang="ja">
 <head>
 </head>
 <body>

 <div id="container">

 </div>

 <script type="text/javascript">
  document.getElementById('container').innerHTML = '<input type=text name="column_name" size="12">';
 </script>
 </body>
 </html>


javascriptのIFコマンドと組み合わせれば、条件を満たすときだけ表示したり、
あるいはテキストボックス以外の要素も表示できる。

innerHTMLはとても便利だ!







posted by db-engineer at 00:00 | Comment(0) | Javascript

2021年05月09日

オブジェクト名の一部(要素)を変数にする

やりたいこと

フォーム内にチェックボックスが約20個あり、その値をチェックしたい。
幸いなことにチェックボックスはすべてYes、Noを選択するものばかり。
チェックボックスの値は以下のコマンドで取得できる。fieldName部分を変数に置き換えたい。


var yesNo = $('input[name="fieldName"]:checked').val();


行ったこと

まず、チェックボックス名を配列にしてループさせた。

 var arr = ['ch1yesno','bd_2yesno',ch3yesno',ch4yesno','ch5yesno','ch6yesno','ch7yesno',‥‥ ];
  $.each(arr, function(index, value) {
  ・
  ・
 })


次が本題で、オブジェクト名の一部を変数に置き換えた。
文字列の連結と同じで、+ を使用した。


 var yesNo = $('input[name="' + value + '"]:checked').val();


ラジオボタンがYes、Noのいずれであれ、選択されているかどうかをチェックしたかったので、


 if (yesNo=="Yes" || yesNo=="No") {
  ・
  ・
 }

とした。

まとめ


 var arr = ['ch1yesno','bd_2yesno',ch3yesno',ch4yesno','ch5yesno','ch6yesno','ch7yesno',‥‥ ];
 $.each(arr, function(index, value) {
  var yesNo = $('input[name="' + value + '"]:checked').val();
  if (yesNo=="Yes" || yesNo=="No") {
   ・
   return false; // ラジオボタンが一つでも選択されていたら値チェックを終了
  }
 })


オブジェクトの要素を変数に置き換える方法をWebで検索し、
成功するまでに3時間以上かかった。
同じことを繰り返さないために記事にしました。






posted by db-engineer at 00:00 | Comment(0) | Javascript

2020年09月02日

戻るボタンを無効にできなくなった。

HTML5では、以下のコードでブラウザの[戻る]ボタンを無効にできていた。


<script type="text/javascript">
history.pushState(null, null, null);

window.addEventListener("popstate", function(e) {
history.pushState(null, null, null);
return;

});
</script>


だが、EdgeとChromeで[戻る]ボタンをクリックすると、

前のページに戻ってしまう。

IEとFire Foxでは無効になる。

Webで検索して、次のページを見つけた。

「Google Chromeではhistory APIを使った戻るボタンの制御ができない」

Chromeでは history.pushState が動作しないらしい。

恥ずかしながら全く、知らなかった。

Edgeは直近のバージョンアップでChromeに似てきたので、

history.pushStateの動作もChromeと同じになったのだろう。

[戻る]ボタンを無効にできないと困ってしまう。

対応策を考えよう。









posted by db-engineer at 00:00 | Comment(0) | Javascript

最新記事
検索
カテゴリーアーカイブ
プロフィール
db-engineerさんの画像
db-engineer
プロフィール
タグクラウド