JavaScript

全16007件中61~80件表示
  • セレクトボックスで何度選択しても並び替えが可能に?

    自分は、テーブルを用いて、セレクトボックスを押して、並び替えができるようにしましたが、 いかんせん、セレクトボックスを変更すると、 表示内容が変わりますが、1度並び替えたらセレクトボックスの変更ができません。 どうすればいいのでしょうか。 以下は、そのhtml文です。 <select> <option value="select">選択してください</option> <option value="nankai-main">南海本線</option> <option value="semboku">泉北高速鉄道</option> </select> <table id="sort_table"> <thead> <tr> <th>No</th> <th>全角項目</th> <th>数値項目</th> <tbody> <tr id="nankai-main"><td class="nankai-color">1</td><td class="nankai-color">難波駅</td><td class="nankai-color">なんばえき</td></tr> <tr id="nankai-main"><td class="nankai-color">2</td><td class="nankai-color">今宮戎駅</td><td class="nankai-color">いまみやえびすえき</td></tr> <tr id="semboku" style="display:none;"><td class="semboku-color">1</td><td class="semboku-color">中百舌鳥駅</td><td class="semboku-color">なかもずえき</td></tr> <tr id="semboku" style="display:none;"><td class="semboku-color">2</td><td class="semboku-color">深井駅</td><td class="semboku-color">ふかいえき</td></tr> </tbody> <style> #nankai-main { display:none; } #semboku { display:none; } td.nankai-color { background-color:#ccc; border: 1pt solid #f70; } td.semboku-color { background-color:#ccc; border: 1pt solid #00f; } </style> </table> <!--セレクトボックスで表示切替--> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script> <script id="rendered-js" > $('select').change(function () { var val = $('select option:selected').val(); if (val == 'select') return; $('tbody tr').fadeOut(); $('tbody tr#' + val).fadeIn(); }); </script> <style> #sort_table { border-collapse:collapse; } #sort_table td { } #sort_table th { cursor:pointer; background-color:lightgray; } </style> <script src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js"></script> <!--テーブルのソート機能--> <script> window.addEventListener('load', function () { let column_no = 0; //今回クリックされた列番号 let column_no_prev = 0; //前回クリックされた列番号 document.querySelectorAll('#sort_table th').forEach(elm => { elm.onclick = function () { column_no = this.cellIndex; //クリックされた列番号 let table = this.parentNode.parentNode.parentNode; let sortType = 0; //0:数値 1:文字 let sortArray = new Array; //クリックした列のデータを全て格納する配列 for (let r = 1; r < table.rows.length; r++) { //行番号と値を配列に格納 let column = new Object; column.row = table.rows[r]; column.value = table.rows[r].cells[column_no].textContent; sortArray.push(column); //数値判定 if (isNaN(Number(column.value))) { sortType = 1; //値が数値変換できなかった場合は文字列ソート } } if (sortType == 0) { //数値ソート if (column_no_prev == column_no) { //同じ列が2回クリックされた場合は降順ソート sortArray.sort(compareNumberDesc); } else { sortArray.sort(compareNumber); } } else { //文字列ソート if (column_no_prev == column_no) { //同じ列が2回クリックされた場合は降順ソート sortArray.sort(compareStringDesc); } else { sortArray.sort(compareString); } } //ソート後のTRオブジェクトを順番にtbodyへ追加(移動) let tbody = this.parentNode.parentNode; for (let i = 0; i < sortArray.length; i++) { tbody.appendChild(sortArray[i].row); } //昇順/降順ソート切り替えのために列番号を保存 if (column_no_prev == column_no) { column_no_prev = -1; //降順ソート } else { column_no_prev = column_no; } }; }); }); //数値ソート(昇順) function compareNumber(a, b) { return a.value - b.value; } //数値ソート(降順) function compareNumberDesc(a, b) { return b.value - a.value; } //文字列ソート(昇順) function compareString(a, b) { if (a.value < b.value) { return -1; } else { return 1; } return 0; } //文字列ソート(降順) function compareStringDesc(a, b) { if (a.value > b.value) { return -1; } else { return 1; } return 0; } </script>

  • ラジオボタン→セレクトボックスで表示切替がしたい

    次のhtml文をラジオボタンではなく、セレクトボックスによる選択に変えることって不可能でしょうか。 参考にしたサイトはこちらです。 https://www.torat.jp/css-radiobotton/ 以下はそのソースです。 <form> <div class="form-check"> <input class="form-check-input" type="radio" name="maker" value="food" onclick="formSwitch()" checked> <label class="form-check-label"> 好きな食べ物</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="maker" value="place" onclick="formSwitch()"> <label class="form-check-label"> 好きな場所</label> </div> </form> <ul> <div id="foodList"> <li>お寿司</li> <li>アイスクリーム</li> <li>チーズケーキ</li> <li>お団子</li> </div> <div id="placeList"> <li>自由が丘</li> <li>下北沢</li> <li>吉祥寺</li> <li>高円寺</li> </div> </ul> <script> function formSwitch() { hoge = document.getElementsByName('maker') if (hoge[0].checked) { // 好きな食べ物が選択されたら下記を実行します document.getElementById('foodList').style.display = ""; document.getElementById('placeList').style.display = "none"; } else if (hoge[1].checked) { // 好きな場所が選択されたら下記を実行します document.getElementById('foodList').style.display = "none"; document.getElementById('placeList').style.display = ""; } else { document.getElementById('foodList').style.display = "none"; document.getElementById('placeList').style.display = "none"; } } window.addEventListener('load', formSwitch()); </script>

  • bootstrapについて

    bootstrapのデモを見ると、フワッと写真や文字が浮かび上がる演出を、私のHPもに取り入れたい思っていますが、Bbootstrapの設定方法が分かりません。 どなたか、ご存知でしたらご教授をお願いします。

  • 以下のjavascriptでvalueを取得、判定

    以下のjavascriptでvalueを取得、判定したいです。 以下のように、value値に数字が与えられていて、 その数値を出すというのと、 また、その数値を仮に3以上かどうか判定したい場合に、どのようなjs文になるのかをお伺いしたいです。 また、if文を使うのはわかりますが、consoleでも、alertでも、windows.openでもなく、画面に直接表示させたいです。 このような場合はイベントを使わざるを得ないのでしょうか。 なるべく簡便に済ませたいです。 <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル</title> <script src="sample.js"></script> </head> <body> <select id="sel1"> <option value="01">みかん</option> <option value="02">りんご</option> <option value="03">バナナ</option> <option value="04">ぶどう</option> <option value="05">レモン</option> </select> <input type="button" value="ボタン" onclick="getValue('sel1');"> </body> </html>

  • HTML、CSS、Javaスクリプトを使用して

    HTML、CSS、Javaスクリプトを使用して1つの場所に、リンク付きの画像を順番に複数表示させ、それをループさせるにはどのようにすれば良いでしょうか?

  • 質問Aと質問Bを選択して、メッセージを出したい。

    質問Aと質問Bを選択して、メッセージを出すプログラムを作っています。 ところが、functionについて、引数の場合は2つ同時に使用できますけれども、関数はできないのがネックです。 なぜそれが必要かというと、 funcの中にifが入っており、そこで、メッセージの挙動の操作をしているためです。 もし、関数を2つ同時に使うとしたらどのようにしたらいいですか。 以下はそのjavascript文です。 <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function selectboxChange101() { var val101 = document.forms.form101.Select101.value; var target = document.getElementById("output101"); if (val101 == "要素101") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form101" action=""> <select id="Select101" onchange="selectboxChange101();"> <option>---</option> <option value101 == "要素101">要素101</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output101"></div> </body> <body> <form name="form111" action=""> <select id="Select111" onchange="selectboxChange111();"> <option>---</option> <option value111 == "要素111">要素111</option> <option>要素12</option> <option>要素13</option> <option>要素14</option> <option>要素15</option> </select> </form> <div id="output111"></div> </body> </body> </html>

  • JS ベタ打ち原稿を成型して配列変数に格納する

    JavaScript ベタ打ち原稿を成型して配列変数に格納するには? テキストエリアにベタ打ち原稿があります。 これを出力例のように配列変数に格納するには JavaScriptでどういうコードになりますか? 出力例 1. Harrison Gregory - I'm Alone (2:09) ・・・ 51. Adward Hamilton - I Love You So (2:53) ・・・ 100. The Levons - We're Just Friends Now (2:25) [HTML] <textarea id="genkou" cols=100 rows=30 style="display:none"> 1. Harrison Gregory - I'm Alone (2:09) 2. Los Po-Boy & Citos - Trinidad (3:29) 3. Greenwood Rythm Coalition - Guajira (3:34) 4. Bobby Milano - Rags To Riches (2:07) 5. Frank Heppinstall - Sweetheart (3:27) 6. Sonny Holley - I Need Your More (2:49) 7. Spece Long - José (3:19) 8. Dlen Lovers - May I Hide The Pride (2:36) 9. Bernadette - Set Me Free (2:20) 10. Big Guss Jefferson - Will You Be There (2:47) 51. Adward Hamilton - I Love You So (2:53) 52. Heaven All Around Me - Heaven All Around Me (2:39) 53. Keith Powell & The Valets - I Sould Know Better (2:44) 54. Adah Louise Wilson - Too Much (2:10) 55. The Snowmen - Sugar Daddy (2:10) 56. Victorians - I Want To Belong To You (2:19) 57. Jackson Bros - But Still I Do (2:38) 58. Freddie Scott - I Had A Lover (2:41) 59. Avia - Westernize (3:38) 60. Jimmy Dean - Sixteen Tons (2:40) 91. Wee Willie Harris - Little Bitty Girl (2:22) 92. Miller Sisters - Tell Him (2:35) 93. O'jays - Miracle (2:30) 94. Roby Davis - Minor Mad (2:55) 95. Ruth Brown - Walk With Me Lord (2:13) 96. Stand By Me - Stand By Me (3:17) 97. September Jones - I'm Coming Home (2:47) 98. The Tams - Deep Inside Me (2:23) 99. Simon Scott - Tell Him I'm Not Home (2:44) 100. The Levons - We're Just Friends Now (2:25) </textarea>

  • JS 正三角形から正六角形にするには

    JavScript で正三角形から正六角形にするには? 赤い円と一辺が100pxの正三角形を描きました。 青い正三角形は、頂点が円の中心にあり、2点が円周上にあります。 この時、ボタンを押したら6色の正六角形を描画します。(添付図参照) それには、どのようなコードになりますか? 正三角形の色 (反時計回り) blue -> red ->violet ->green -> orange -> lightgrey <style> .wrap3 { margin: 0 auto; position: relative; width: 200px; height: 200px; border: solid 1px red; border-radius: 50%; } .triangle3 { position: absolute; left: 50px; top: 100px; width: 0; height: 0; border-style: solid; border-right: 50px solid transparent; border-left: 50px solid transparent; border-bottom: 87px solid blue; border-top: 0; } </style> <button id="btn3">正六角形にする</button> <div class="wrap3"> <div class="triangle3"></div> </div> <script> function draw() { // ? }; btn3.onclick = draw; </script>

  • JS セルインデックスから関数を作れますか?

    JavaScript 正方形を縦横とも同じ数で分割した時に、セルインデックスを引数として 列番号、行番号、色名を返す関数 getCellinfo(index, nn) を作れますか? なお、次の変数名を用いることにします。 let nn : n行n列の正方形 let index : セルインデックス (parameter) let col : 列番号 (先頭 0) let row : 行番号 (先頭 0) let bgc : 色名

  • JS スライドトグルのプレイリストにするには?

    JavaScript スライドトグルの音楽プレイリストにするには? 現在、編集中のデータがテキストエリアにあります。 複数のプレイリストで、 1) 巻(VOLUME)ごとに分類されていません。 2) また、タイトル(巻、VOLUME)が無い状態です。 <仕様> ・これらを順番に「VOLUME 01」のようなタイトルを付けます。 ・編集後は result要素に出力させます。 ・初めはタイトルだけが表示されている。 ・タイトルをクリックすると内容が表示・非表示でスライドトグルされる。 このようにするには、どんなコードでできますか? [HTML] <textarea id="genkou" cols=80 rows=60> 01 Billy Preston - Let Me Know (2:04) 02 Frank Evans - Lonely Town (2:35) 03 Patsy Montana - 16 Pounds (2:32) 04 Stevie Wonder - Lois (2:29) 05 The Tymes - With All My Heart (2:12) 06 George Greeley - Ride The High Country (2:27) 07 Linda Lanzetta - President Kennedy Cha Cha (2:10) 08 Craig Douglas - Time (2:23) 09 Jimmie Beaumont - Give Her My Best (2:02) 10 Gunther Neefs - A Hundred Pounds Of Clay (2:47) 11 Jimmy Justice - Up On The Roof (2:34) 12 Enoch Light & The Light Brigade - I Want To Be Happy Cha Cha (2:32) 13 Dean Martin - I Will (2:21) 14 Claire Chevalier - Va (2:55) 15 Little Eva - Stand By Me (2:25) 16 Petula Clark - Partir, Il Nous Faut (2:31) 17 Connie Francis - Una Notte Cosi (2:11) 18 Barritas - Se Io Ti Regalo Un Fiore (2:09) 19 Joey Heatherton - Live And Learn (2:09) 20 Henry Mancini - Patricia (1:57) 01 The American Sisters - Never On Saturday (2:02) 02 Jackie Edwards - Only A Fool Breaks His Own Heart (2:23) 03 Steve Alaimo - I Won't Let You Go (2:14) 04 Maureen Evans - Never In A Million Years (2:16) 05 Brian Hyland - Baby Face (1:54) 06 Christer Sjögren - She's Not You (2:16) 07 Elder Barber - El Vendedor De Melones (2:34) 08 Elvis Presley - Fun In Acapulco (2:30) 09 Ennio Sangiusto - Chariot (2:22) 10 Emperor Rosko - Al Capone (3:34) 11 Eydie Gorme - My Heart (2:49) 12 The Fives Royales - Catch That Teardrop (2:45) 13 Frida Boccara - La Más Bella Del Baile (2:28) 14 Gene Latter - Too Busy Thinking About My Baby (3:15) 15 Conny Froboess - Tanz Noch Einmal Mit Mir (2:22) 16 Gerry Granahan - Unchained Melody (2:05) 17 Helena Lemkovitch - Paradis Paradis - (2:20) 18 Paul Severs - Ange (Angel) (2:36) 19 Jackie Lynton - Don't Take Away Your Love (2:51) 20 James Booker - Gonzo (2:26) 01 The Playmates - While The Record Goes Around (2:11) 02 Al Alberts - Before Tomorrow Is Yesterday (2:28) 03 Jimmy Beaumont -There's No Other Love (2:10) 04 Jimmy Hughes - My Loving Time. (2:03) 05 Jo Leemans - Weet Je Nog Wel Die Avond In De Regen (2:08) 06 Sarah Vaughan - Smooth Operator (2:27) 07 The Professionals - Maigret Theme (2:53) 08 Ray Jameson - José (Rozez) (2:04) 09 Prince Buster & The All Stars - Django Fever (3:09) 10 Richard Chamberlain -You Always Hurt The One You Love (2:05) 11 Claudia Sylva - Quand Tu M'ouvres Les Bras (2:37) 12 Eliza - Broken Hearted Melody 13 Little Peggy March - Te Ne Vai (2:27) 14 Shelley Fabares - Breaking Up Is Hard To Do (2:07) 15 Jill Jackson - All Over Again (2:23) 16 Linda Scott - Catch A Fallin' Star (1:43) 17 Bob Mc Fadden - The Sheik Of Araby (2:23) 18 Alice & Ellen Kessler - Johnny Angel (2:11) 19 Terry Stafford - Kiss Me Quick (2:42) 20 Henri Mancini - Theme (From Cade's Country) (2:05) </textarea> <div> <button id="btn">実行ボタン</button> </div> <div id="result"></div>

  • JS テキストエリアを多色表示させるには?

    JavaScriptでテキストエリアの数字だけ 赤字にすることはできますか? 「できません」と即答しそうですが、 工夫すれば「できました」になります。(添付図参照) このように、テキストエリアを表示するには どんなコードでできますか? <div class="container"> <textarea class="textArea" readonly></textarea> </div> <script> //テキストエリアに表示するデータ const data = [ ["== The Body Mass Index (BMI) RESULT =="], [" "], ["DANDY 身長 170cm, 体重 70Kg, BMI: 24.2, Normal"], ["CHUBBY 身長 160cm, 体重 70Kg, BMI: 27.3, OverWeight"], ["FATMAN 身長 150cm, 体重 70Kg, BMI: 31.1, Obese Class I"], ]; </script>

  • MIDI 再生 基本動作の方法?

    実行したいこと:   windows 環境下で ブラウザ内で、与えらえたMIDI音源を再生する 分からないこと:   入門方法が見当たらないため、   https://html5experts.jp/ryoyakawai/16787/   いきなり、このような難解な解説文しか手に入りません 達成したいこと:   2-3小節程度の短い MIDIコードをブラウザ上で再生するだけ   楽器音は、Windows 内臓のピアノ音源など、一般的に使われてい  るサウンドをそのまま利用   PC外部のMIDI楽器との接続は、しません   あくまで、ブラウザ上で音符の試聴をする程度の、簡易プログラムを作成したいです       コード作成の経験は、あります。 よろしくお願いいたします。   

    • ベストアンサー
    • mqm
    • JavaScript
    • 回答数2
  • JS ベタ打ち原稿を成型して出力するには?

     JavaScript ベタ打ち原稿を成型して出力するには? 未編集の洋楽プレイリストがあります。 これを、次の書式どおりに成型することにします。 [成型後の書式] 2桁の連番_歌手名_-_曲名_(分:秒) or (西暦年) [_:半角空白] <仕様> ・jQuery等のプラグインは不使用のこと ・「連番、歌手名、曲名、演奏時間」が1行ずつのまとまり ・演奏時間の箇所が 西暦年の場合がある ・歌手名、曲名に 次の記号が含まれている場合がある  アンパサンド、半角括弧、アポストロフィ、バッククォート (& ( ) ’ `) 手順1 テキストエリア「genkou」にベタ打ち原稿を貼り付けます。 手順2 実行ボタンを押すと、テキストエリア「result」に成型して出力します。 そうするためには、どのような JavaScriptコードになりますか。 [HTML] <textarea id="genkou" cols="100" rows="30"> 01 - Artie Garr (a.k.a Art Garfunkel) - Beat Love (1959) 02 - Mark Dinning - Loving Touch (2:10) 03 - Petty Booka - Bla Bla Bla Cha Cha Cha (2:28) 04 - Sam Fletcher - I'd Think It Over (2:38) 05 - Untouchables - Raisin Sugar Cane (2:11) 06 - Esther Phillips - Just Say Goodbye (2:18) 07 - Eddie Holland - Jamie (2:23) 08 - Della Reese - Tea For Two (2:13) 09 - Danny Winchell - Por Favor (2:10) 10 - Clyde Otis - Jungle Drums (1:56) 11 - Christine Quaite - Your Nose Is Gonna Grow (2:10) 12 - Martin Bet - I Know A Girl (2:01) 13 - Arthur Alexander - Anna (2:52) 14 - Mickey & Sylvia - Love Is Strange (2:54) 15 - Richard Anthony - Cin Cin (Chin Chin) (3:02) 16 - Sarah Vaughan - Broken Hearted Melody (2:55) 17 - Aphrodite's Child - Rain And Tears (1968) 18 - Nico Landers - Stil In De Straten (2:26) 19 - Ginny Arnell - He's My Little Devil (2:10) 20 - Azie Mortimer - Lips (2:22) 21 - Ava Max - Salt (2019) 22 - Gun`s N Roses - Don't Cry (1991) 23 - Sarah Vaughan - Smooth Operator (2:27) 24 - The Weeknd - Save Your Tears (2020) 25 - Martha Reeves & The Vandellas - Nowhere To Run </textarea> <div> <button id="btn">実行ボタン</button> </div> <textarea id="result" cols="100" rows="10" placeholder="成型後" readonly></textarea> </textarea>

  • 毎月末日期限の自動更新可能なカウントダウンタイマー

    Javascriptで、毎月末日を期限とした、毎月自動更新ができるカウントダウンタイマー(日・時間・分・秒)を表示するソースコードを教えていただけないでしょうか。例えば、7月1日にサイトにアクセスすると、7月31日までの残り30日・〇〇時間・△△分・□□秒が表示される、あるいは8月10日にアクセスすると8月31日までの残り20日・●●時間・▲▲分■■秒が表示される、といったイメージです。よろしくお願いします。

  • JS 疑似要素のアイコンをアニメーション

    JS 疑似要素のアイコンをアニメーション JavaScriptで疑似要素のアイコンをアニメーションさせます。 テーブルヘッダーにソート用のアイコンを付けました。 下記のような動作をさせるには、どのようなコードで書きますか? (添付図は動作例) <仕様> ・アニメーションさせる項目名にクラス名「icon」を付けておく ・初期状態は、三角形アイコンを薄い色で表示 ・項目名のクリックでアイコンが赤く変わる ・もう一度クリックで青色の逆三角形に変わる ・同じ項目名をクリックするたびにトグル ・別の項目名のクリックで、直前のアイコンは初期状態に戻る ・ソート機能は付けていない。 <style> table { border-collapse: collapse; } th { background-color: #ddd; } th, td { padding: 0 1em; height: 30px; line-height: 30px; font-size:1em; } thead th.icon { position: relative; padding-left: 30px; cursor: pointer; } thead th.icon::before { content: "▲"; display: inline-block; position: absolute; left: 4px; color: #eee; } tbody td:nth-child(n+3){ text-align: right; } </style> <table id="table4" border="1"> <thead> <tr> <th class="icon">No.</th> <th class="icon">NAME</th> <th class="icon">HEIGHT (cm)</th> <th class="icon">WEIGHT (Kg)</th> <th>BMI</th> </tr> </thead> <tbody> <tr><th>1</th><td>CHUBBY</td><td>160</td><td>90</td><td>37.1</td></tr> <tr><th>2</th><td>VICKY</td><td>156</td><td>60</td><td>24.7</td></tr> </tbody> </table>

  • javascriptでifで得た結果からさらに配列

    以下のプログラミングで、松山と高松を選択すると、50点とすることができます。 そこから、その際、ifで得た50から、さらに配列を呼び出すことって可能でしょうか。 これが書けなければ、プログラマーのメンツ丸つぶれです。 <script type="text/javascript"> function kotae() { ten=0 if((f.q1.value == "松山市"&&f.q2.value == "高松市")||(f.q1.value == "高松市"&&f.q2.value == "松山市")) {f.q1.style.backgroundColor="aqua ";ten = ten + 50} else f.q1.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<4){f.rank.value ='ab\r\ncd'} else if(f.tokuten.value >=20){f.rank.value = 'B'} else if(f.tokuten.value >=15){f.rank.value = 'C'} else if(f.tokuten.value <10){f.rank.value = 'D'} //ここまで } </script> <style> textarea.hoge { width: 150px; height:200px;} </style> <body> <form name="f"> 愛媛県の県庁所在地は <select name="q1"> <option>選択肢</option> <option>名古屋市</option> <option>松山市</option> <option>金沢市</option> <option>高松市</option> </select> です。 <p> 香川県の県庁所在地は <select name="q2"> <option>選択肢</option> <option>名古屋市</option> <option>松山市</option> <option>金沢市</option> <option>高松市</option> </select> です。<p> 愛知県の県庁所在地は <select name="q3"> <option>選択肢</option> <option>名古屋市</option> <option>松山市</option> <option>金沢市</option> <option>高松市</option> </select> です。<p> 石川県の県庁所在地は <select name="q4"> <option>選択肢</option> <option>名古屋市</option> <option>松山市</option> <option>金沢市</option> <option>高松市</option> </select> です。<p> <input type="button" name="b1" value="答え合わせ" onclick="kotae()"> <p> <input name=tokuten size="6">点 <!--HTMLここから--> <!--ランク--> <textarea name=rank class="hoge"></textarea> <!--HTMLここまで--> <!--問題-->

  • JS テーブルのアニメーション表示

    JavaScript テーブルのアニメーション表示 ここに1つのテーブルがあります。 「すべて表示」にチェックを入れたら、すべての列を表示します。 「3大栄養素」にチェックを入れたら、3大栄養素の列だけ表示します。 次の仕様を満たすには、どのようなコードになりますか? <仕様> ・「3大栄養素」は表の項目セルに「S3」クラスを付与 ・チェックボックスで列の表示制御をする ・表示・非表示はスライド・アニメーション [HTML] <div class="container"> <form name="form2"> <label><input name="check2" type="checkbox">3大栄養素</label> </form> <table id="tbl3"> <caption>イチジクの栄養価</caption> <thead> <tr> <th>状態</th> <th>エネルギー</th> <th>水分</th> <th class="S3">たんぱく質</th> <th class="S3">脂質</th> <th class="S3">炭水化物</th> <th>灰分</th> <th>飽和脂肪酸</th> <th>不飽和脂肪酸</th> <th>コレステロール</th> <th>食物繊維</th> </tr> </thead> <tbody> <tr> <th>生</th><td>54 kcal</td><td>84.6g</td><td>0.6g</td> <td>0.1g</td><td>14.3g</td><td>0.4g</td><td>0.02g</td> <td>0.07g</td><td>0</td><td>1.9g</td> </tr> </tr> <th>乾</th><td>291 kcal</td><td>18.0g</td><td>3.0g</td> <td>1.1g</td><td>75.3g</td><td>2.5g</td><td>0.17g</td> <td>0.60g</td><td>0</td><td>10.7g</td> </tr> </tbody> </table> </div>

  • Jxaのフォルダー参照ダイアログを表示

    初心者です。 macでスクリプトエディタをつかって フォルダー参照のダイアログを表示させたいのですが 下記コードを実行するとエラーがでてしまいます。 解決策はありますでしょうか? コード ----------------------------------------------------------------------------- var destFolder = null; destFolder = Folder.selectDialog( 'PDF ファイルの保存先フォルダーを選択してください。', '~' ); ------------------------------------------------------------------------------ エラー内容 Error: ReferenceError: Can't find variable: Folder 言語:JavaSclipt

  • 入力フォームのテキストのエラーメッセージについて

    javascript 2つのセレクトボックスを全て選択されていないと、「テキストによるエラーメッセージを表示させるコード」を調べています。 該当コードは<script>■■四角の記号の部分です。 セレクトボックスを2つとも未選択でsubmitを押すと、アラートのメッセージとテキストエラーによるメッセージ2つが同時に表示されるようになっています。 コードはきちんと起動します。 該当部分のdocument.querySelector('.err')?.remove();の意味が理解できずにいます。 insertAdjacentHTMLで出したテキストエラーをセレクトボックスが空欄でない時に非表示にするとい解釈のようですが、あってますでしょうか? class名やid名に('.err')?という名前は使用していませんがドットに.errとクエスチョンマーク?とはどういう意味なのでしょうか? 条件演算子の?でしょうか条件演算子の構文で変数 = 条件 ? 値1 : 値2;の構文とも違うようですし。 分からずにいます。回答よろしくお願いいたします。 ---HTMLのコード--- <body> <form action="form1.php" method="post" id="form"> 選択項目①: <select id="fruits" class="select1" name="fruits"> <option value="">果物を選択する</option> <option value="リンゴ">>リンゴ</option> </select> 選択項目②: <select id="fruits2" class="select1" name="fruits2"> <option value="">食事を選択する</option> <option value="ごはん">>ごはん</option> </select> <div class="alert15"></div><!--alert15 2つのフォーム全て記入がない場合ここにテキストエラーを表示する--> <button id="submit" class="yohaku"> </button> </form> ---javascriptののコード--- <script> const form = document.querySelector('#form'); const fruits = document.querySelector('#fruits'); const fruits2 = document.querySelector('#fruits2'); // セレクトボックスを選択されてないとアラートによるエラーメッセージを表示 form.addEventListener('submit', function(event) { let msg = ""; if (fruits.value == "") msg += "選択項目①:※選択項目①を選択して下い。\n"; if (fruits2.value == "") msg += "選択項目②:※選択項目②を選択してください。\n"; if (msg != "") { event.preventDefault(); alert(msg); } }); </script> ■■ <script> // 2つとも全て選択されてないとテキストによるエラーメッセージの表示 form.addEventListener('submit', e=>{ document.querySelector('.err')?.remove(); document.querySelector('.alert15').insertAdjacentHTML('afterend',`<span class="err">※選択項目①と選択項目②を全て選択して下さい。</span>`); },true); </script> </body>

  • JS テーブルのデータ検索

    JavaScriptのテーブルで データ検索をします。 ヒットしたセルの背景は色付けします。 正規表現を用いて検索するには どのようなコードになりますか? ※ 正規表現を用いれば セルごとの照合作業は不要です。   つまり、ループ処理は無用です。 [HTML] <form name="form3"> <input name="btn" type="button" value="整数"> <input name="btn" type="button" value="小数"> <input name="btn" type="button" value="半角英字"> <input name="btn" type="button" value="日本語"> <input name="reset" type="button" value="リセット"> </form> <table id="table3" border="1"> <thead> <tr> <th></th> <th>A</th><th>B</th><th>C</th><th>D</th><th>E</th> <th>F</th><th>G</th><th>H</th><th>I</th><th>J</th> </tr> </thead> <tbody> <tr> <th>1</th> <td>風</td><td>25</td><td>fig</td><td>36</td><td>84</td> <td>45</td><td>dog</td><td>鳥</td><td>7.9</td><td>昼</td> </tr> <tr> <th>2</th> <td>16</td><td>ink</td><td>4.3</td><td>1.4</td><td>64</td> <td>6.2</td><td>gal</td><td>7.2</td><td>6.5</td><td>hit</td> </tr> <tr> <th>3</th> <td>arm</td><td>83</td><td>1.8</td><td>6.1</td><td>冬</td> <td>6.4</td><td>8.4</td><td>地</td><td>joy</td><td>cat</td> </tr> <tr> <th>4</th> <td>22</td><td>egg</td><td>春</td><td>番</td><td>3.5</td> <td>天</td><td>人</td><td>7.8</td><td>朝</td><td>2.8</td> </tr> <tr> <th>5</th> <td>月</td><td>愛</td><td>5.1</td><td>花</td><td>bat</td> <td>51</td><td>7.5</td><td>夏</td><td>18</td><td>秋</td> </tr> </tbody> </table>