不要な表示の消し方

2023/09/06 17:08

このQ&Aのポイント

次の文のラジオボックスの前の数字を消す方法を教えてください。
質問文にあるラジオボックスの前の数字を非表示にする方法を教えてください。
ラジオボックスの前の数字を削除する方法について教えてください。

ベストアンサー

不要な表示の消し方

2018/06/25 05:44

次の文のラジオボックスの前の数字を消すにはどうすればいいのでしょうか？ <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>三崎弁かるた！？</title> <style> body { background-color: #00FFFF; font-size: 30px; font-family: Verdana, sans-serif; } input { font-size: 30px; } button { font-size: 30px; } } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> <script> var mondaibun = ` おらがこ～よ,おらがこーよ,え～ていんじぇんお,あにがよ,うんめろうまい,いくべよ,かってぼえ,くいなよ,けえんべよ,きんのわれいた？,こてたとも,しゃーねじぇん,せってやがら,佐島の兄さんせってたぞ,スリッパはきなよ,そいともあいか？,ちゃこいだ,つえじぇんお,てーげそんなもんだ,とんじゃかあんめじぇん,たどりばらかよかってぼえ,かってぼえ,くいなよ,けえんべよ,きんのわれいた？,こてたともしゃーねじぇん,しゃーねじぇん,せってやがら,佐島の兄さんせってたぞ,スリッパはきなよ,そいともあいか？ちゃこいだ,ちゃこいだ,つえじぇんお,てーげそんなもんだ,とんじゃかあんめじぇん,たどりばらかよ `; var mondai = null; var sound = [ "folder3/seikai.mp3", "folder3/huseikai.mp3", "folder3/start.mp3" ]; sound = sound.map(function(v) { var audio = new Audio(v); audio.load(); return audio; }); function start() { $("#start").after('<p id="info"></p><div id="sentaku"></div><hr>'); $("#start").remove(); sound[2].play(); mondai = mondaibun.trim().split("\n"); setTimeout(function() { next(); },200 ); } function next() { $("#sentaku").empty(); if (mondai.length == 0) { $("#info").text("終わり"); return; } var arr = mondai.shift().split(","); var str = arr.shift(); speechSynthesis.speak(new SpeechSynthesisUtterance(str)); $("#info").text("問題 :" + str); var kotae = arr[0]; arr = _.shuffle(arr); arr.forEach(function(v, i) { var flag = (kotae == v) ? true : false; var html = `${i+1}: <input type="button" value="${v}" onclick="sentaku(${flag})">`; $("#sentaku").append(html); }); } function sentaku(x) { if (x == true) { speechSynthesis.cancel(); sound[0].currentTime = 0; sound[0].play(); setTimeout(function() { next(); }, 800); } else { sound[1].currentTime = 0; sound[1].play(); } } </script> </head> <body> <h1>三崎弁かるた！？</h1> <h3>Web Speech APIを利用したクイズです。</h3> <h4> 対応ブラウザ: Chrome</h4> <hr> <font size="30" ><button id="start" onclick="start()">スタート</button></font> </body> </html>

maruikusenidesu
お礼率0% (0/3)

JavaScript
回答数1
ありがとう数0

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

4017B
ベストアンサー率73% (1304/1775)

2018/06/25 11:52 回答No.1

javascriptの、 var html = `${i+1}: <input type="button" value="${v}" onclick="sentaku(${flag})">`; ～の部分の ${i+1}: が該当箇所です。単純にこの部分を削除して、 var html = `<input type="button" value="${v}" onclick="sentaku(${flag})">`; ～みたいに修正すれば数字表示は消えます。

関連するQ&A

scriptが実行されません
現在勉強中でドットインストールのJavaScriptでストップウォッチを作ろうのコードを書いています。ですが、急にscript が実行されなくなってしまいました。何かコードに間違いがあるのでしょうか？ご指摘いただけると助かります。以下コード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ストップウォッチ</title> <style> body{ background:#e0e0e0; font-family:Arial, sans-serif; text-align:center; } #timerText{ color:#00aaff; font-size:128px; margin:40px auto; text-shadow:0 1px 0 rgba(255,255,255,0.5); } </style> </head> <body> 　<div id="timerText">0.00</div> 　<button id ="start">START</button> 　<button id ="stop">STOP</button> 　<button id ="reset">RESET</button> <script> (function(){ 'use.strict'; var startTime; var timerId; var startButton =document.getElementById('start'); var stoptButton =document.getElementById('stop'); var resetButton =document.getElementById('reset'); var timerText =document.getElementById('timerText'); startButton.addEventListener('click',function(){ startTime =Date.now(); updateTimerText(); }); function updateTimerText(){ timerId = setTimeout(function(){ var t =Date.now() - startTime; timerText.innerHTML =(t / 1000).toFixed(2); updateTimerText(); }, 10); } })(); </script> </body> </html> よろしくお願い致します。
- ベストアンサー
- JavaScript
スロットマシン風の表示
スタート押下でドラムが回転、ストップで回転を止めジャンプでページ移動…を目指してスクリプトを書きました。当方MacOS9.2。IE5、NS4.7共、正常に動作。NS7は未確認。WinのNS7でも問題はないようだがWinIEではスタート押下の時点でJAVAスクリプトエラーが発生する。対処法を教えてください。 ━ var Y1='1999'; var Y2='2000'; var Y3='2001'; var Y4='2002'; var Y5='2003'; var Ymax=5; YY=Math.floor(Math.random()*Ymax)+1; var M1='01'; var M2='02'; var M3='03'; var M4='04'; var M5='05'; var M6='06'; var M7='07'; var M8='08'; var M9='09'; var M10='10'; var M11='11'; var M12='12'; var Mmax=12; MM=Math.floor(Math.random()*Mmax)+1; function start(){ YY=YY+1; if(YY>Ymax)YY=YY-Ymax; MM=MM+1; if(MM>Mmax)MM=MM-Mmax; ID=setTimeout("start()",5); document.box.Y.value = eval('Y'+YY) document.box.M.value = eval('M'+MM) } function stop(){ clearTimeout(ID); } function jump(){ if(YY==Ymax&&MM>5){alert('まだ5月');} else { var ym=document.box.Y.value+"/"+document.box.M.value+"/"; location.href=ym; } } ━ <form name=box><input type=button value=Start onClick=start()><input type=text name=Y size=4><input type=text name=M size=2><input type=button value=Stop onClick=stop()><input type=button value=Jump onClick=jump()></form>
- ベストアンサー
- JavaScript
クイズの解説ボタンをつけて表示非表示を切り替えたい
1.前提・実現したいことクイズ問題の下に解説ボタンをつけて表示非表示を切り替えたい発生している問題・エラーメッセージ clickBtn2 is not defined 該当のソースコード <サンプルコード> ------------------------------ <input type="button" value="解説" onclick="clickBtn2()" /> <p id="p2">テスト１</p> <script> //初期表示は非表示 document.getElementById("p2").style.visibility ="hidden"; function clickBtn2(){ const p2 = document.getElementById("p2"); if(p2.style.visibility=="visible"){ // hiddenで非表示 p2.style.visibility ="hidden"; }else{ // visibleで表示 p2.style.visibility ="visible"; } } </script> ----------------------------- 自分で調べたことや試したこと ------------------- <h2>解説</h2> <div id="text_k"></div> <input type="button" value="解説" onclick="clickBtn2()"/> <script type="text/javascript"> /問題と解答 const qa = [ {q:"イルカを漢字で書くとどれ？",a:["海豚","海牛","河豚","河豚"],c:0,k:"くじら目はくじら亜目の小型海獣の総称。からだは紡錘(ぼうすい)形で、前肢はひれとなる。群れをなして泳ぎ、しばしば船について走る。マイルカ・ネズミイルカなど種類が多い。"}, //問題表示 QA.prototype.quiz = function() { //問題 document.getElementById("text_q").innerHTML = (this.mondai_no + 1) + "問目：" + this.mondai_data[this.mondai_no].q; //この問題の選択肢の数は自動判断（選択肢は何個でもOKです） var answer_count=this.mondai_data[this.mondai_no].a.length; //選択肢 var s = ""; for (var n=0;n<answer_count;n++) { s += "【<a href='javascript:test.answer(" + n + ")'>" + (n+1) + "：" + this.mondai_data[this.mondai_no].a[n] + "</a>】"; } document.getElementById("text_s").innerHTML = s; document.getElementById("text_k").innerHTML= this.mondai_data[this.mondai_no].k; } QA.prototype.clickBtn2 =function() { //初期表示は非表示 document.getElementById("text_k").style.visibility ="hidden"; const text_k = document.getElementById("text_k"); if(text_k.style.visibility=="visible"){ // hiddenで非表示 text_k.style.visibility ="hidden"; }else{ // visibleで表示 text_k.style.visibility ="visible"; } } よろしくお願いします。
- ベストアンサー
- JavaScript
WebDatabaseのlistから選択項目表示
HTML5 Web Database でlistから選択した項目を詳細表示したい。詳細一覧detail_b()押下した際、listで選ばれているレコード内容を表示したい。色々試しているのですが・・・どこがおかしいかわかりません。 function load() で list.options[list.options.length] = new Option(row.val2, row.val, row.key1); 項目表示した場合、 function detail_b() でどのようなSELECT文を書けば listで選択された行を指定できるのですか？ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> var db = openDatabase("my_sample3", "", "Sample for my3", 1024*1024); db.transaction(function(tx) { tx.executeSql("create table if not exists storage (key1, val, val2)"); }); function load() { db.transaction(function(tx) { tx.executeSql("select * from storage", [], function(tx, rs) { var list = document.getElementById("list"); list.innerHTML = ""; var rows = rs.rows; for (var i = 0, n = rows.length; i < n; i++) { var row = rows.item(i); list.options[list.options.length] = new Option(row.val2, row.val, row.key1); } }); }); } function detail_b() { var list = document.getElementById("list"); if (list.selectedIndex < 0) { return; } var selected = list.options[list.selectedIndex].value; db.transaction(function(tx) { tx.executeSql("select * from storage where key1 = ?", [selected], function(tx, rs) { var rows = rs.rows; var row = rows.item(0); detail.innerHTML = ""; detail.options[detail.options.length] = new Option(row.val2, row.val, row.key1); }); }); } function remove() { 省略 } function add() { 省略 } </script> </head> <body onload="load()"> <h1></h1> <table border="0"> <tbody> <tr> <td colspan="2"><select id="list" size="5" style="width: 200px"></select></td> <td><button onclick="detail_b()">詳細一覧</button><BR><button onclick="remove()">削除</button></td> <td rowspan="4"><select id="detail" size="5" style="width: 400px"></select></td> </tr> <tr> <td><font face="Times New Roman">キー:</font></td> <td><input type="text" id="key1"></td> <td></td> </tr> <tr> <td><font face="Times New Roman">値:</font></td> <td><input type="text" id="value"></td> <td></td> <td></td> </tr> <tr> <td><font face="Times New Roman">値２:</font></td> <td><input type="text" id="value2"></td> <td><button onclick="add()">追加</button></td> </tr> </tbody> </table> </body> </htm>
- ベストアンサー
- HTML
音声とポップアップ表示を一つのボタンで行う方法
ネット情報のコピペでhead部分に <script> function soundbell(n) { // 割り当てるID名（引数のnを連結して指定） var id = 'sound-'+n ; // 初回の再生以外だったら音声ファイルの再生ポイントを先頭にしておく if( typeof( document.getElementById( id ).currentTime ) != 'undefined' ) { document.getElementById( id ).currentTime = 0; } // [ID:sound-file]の音声ファイルを再生[play()]する document.getElementById( id ).play() ; } </script> を書いて body部分に <a onClick="soundbell(1)"><input type="button" value="aaaaaa"></a> <a onClick="soundbell(2)"><input type="button" value="＊＊＊＊"></a> <audio id="sound-1" preload="auto"> <source src="correct-answer.mp3" type="audio/mp3"> </audio> <audio id="sound-2" preload="auto"> <source src="wrong-answer.mp3" type="audio/mp3"> </audio> を記述してうまく音が出ています。ここで、同じボタンをクリックすると同時に、音とポップアップ表示することに挑戦していますが、なかなかうまくいきません。どなたか教えてくれませんかね。
- ベストアンサー
- JavaScript
javascript 乱数が取得できない
はじめまして。一月ほど前から「パズルネット　ソフィア」 http://www.pori2.net/js/number/4.html というサイトでjavascriptの基礎を学んでいるのですが、乱数を扱う段階になって自分の作成したプログラム（以下） <html> <head> </head> <body onload="Mondai()"> <form name="quiz"> <input type="text" value="" > <input type="button" value="赤" onclick="Push(0)"> <input type="button" value="青" onclick="Push(1)"> <input type="button" value="黄" onclick="Push(2)"> <input type="button" value="緑" onclick="Push(3)"> <input type="button" value="白" onclick="Push(4)"> </form> <script type="text/javascript"> </script> </body> </html> を実行してもテキストボックス内に何の値も表示されず、ボタンを押しても「違います。」とだけしか出てきません。ブラウザはfirefoxを使用しており、javascriptの設定もonになっています。カンマや鍵括弧などの記号にも打ち間違いがないかサンプルプログラムを参考にしながら確認してみたのですが、どこにもおかしな点はありませんでした。サンプルプログラムは下記のとおりで、こちらは正常に実行されます。 <body onload="Mondai()"> <form name="quiz"> <input type="text" value=""> <input type="button" value="赤" onclick="Push(0)"> <input type="button" value="青" onclick="Push(1)"> <input type="button" value="黄" onclick="Push(2)"> <input type="button" value="緑" onclick="Push(3)"> <input type="button" value="白" onclick="Push(4)"> </form> <script type="text/javascript">  </script> どなたかアドバイスをいただけないでしょうか？よろしくお願いします。
- 締切済み
- JavaScript
JavaScriptで音を鳴らす記述を教えて下さい
JavaScriptにお詳しい方お願いします。 html5マウスオーバーで音が鳴る記述を作ろうとしています。初心者未満の者でなのですがネット上に公開されているソースを引っ張って来てカスタムしようとしております。下記記述でBoxと名前を付けたDivブロックにマウスを乗せるとsong1.wav（song1.mp3）という音声ファイルが鳴ります。（現在の状況とご質問の意味が伝わればと思い動画を添付しました。）続けてsound1とsound2いうDivブロックにも別々の音声ファイルを鳴らせたいのですが記述方法が分かりません。 Div sound1ではsong2.wav（song2.mp3） Div soud2ではsong3.wav（song3.mp3）を鳴らす記述方法をご指導いただければ幸いです。JavaScript達人の方々よろしくお願い致します。 <!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>OKwave de ご質問</title> <style> .Box{ position: absolute; display: block; width: 250px; line-height: 150px; valign: middle; background-color: #000; text-align: center; color: #fff; font-size: 20px; font-weight: 700; margin-left: 50px; } .sound1{ position: absolute; width: 300px; height: 250px; margin-left: 330px; background-color: #aaa; font-size: 20px; font-weight: 700; text-align: center; } .sound2{ position: absolute; width: 300px; height: 250px; margin-left: 660px; background-color: #bbb; font-size: 20px; font-weight: 700; text-align: center; } p { position: relative; top: 50%; margin-top: -1em; text-align: center; margin-top: -30px; } .font2{ font-size: 40px; } </style> </head> <body> <script> var $id = function(id) { return document.getElementById(id); }; var $classAll = function(c) { return document.getElementsByClassName(c); }; var AUDIO_EXT = (function(){ var ext = ""; var audio = new Audio(); if (audio.canPlayType("audio/wav") == 'maybe') { ext="wav"; } else if (audio.canPlayType("audio/mp3") == 'maybe') { ext="mp3"; } return ext; })(); var AUDIO_LIST = { "okwave1": new Audio("sound1." + AUDIO_EXT), }; window.onload = function() { var eMenuList = $classAll("Box"); for (var i=0,len=eMenuList.length; i<len; ++i) { var eMenu = eMenuList[i]; eMenu.addEventListener("mouseover", function(){ var data = this.getAttribute("data"); AUDIO_LIST[data].play(); AUDIO_LIST[data] = new Audio( AUDIO_LIST[data].src ); }, false); } }; </script> <div class="Box" data="okwave1"><p class="font2">div=Box</p>ココは音が鳴ります。</div> <div class="sound1" data=""><p class="font2">div=sound1</p><p>ココも音を鳴らしたいです。<br />よろしくお願いします。</p></div> <div class="sound2" data=""><p class="font2">div=sound2</p><p>ココも音を鳴らしたいです。<br />よろしくお願いします。</p></div> </body> </html>
- ベストアンサー
- JavaScript
なぜ、この場面で、ループ関数が必要なのでしょうか！
プログラムレベルは下の下です。　以下のＨＰはhtmlとphpプログラムのコラボレです。　"表示"タグをクリックすれば、　"Google" "Yahoo" " CBS News" "abc NEws" のタグが出てきて、クリックすれば、ホームページが見れるという　単純なHPです。　そこで、分からに事があります。 sample6.htmlの中に"for"関数がありますが、ループ関数が使われています。このプログラムのからくりを勉強中ですが、現在ループでつまづいています。_ _ 　なぜ、この場面で、ループ関数が必要なのでしょうか！？　以下プログラムです、宜しくお願いします。　ファイル名：sample6.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>配列とJSON</title> <script type="text/javascript" src="../lib/jquery-1.8.1.min.js"></script> <script type="text/javascript"> $(function (){ $("#exe").click(hello); }); function hello(){ $.get("sample6.php", {}, function(resp){ var json = eval(resp); var tags = ""; for (var i = 0; i < json.length; i++) { if(i==0){ tags +="<div>サーチ&ポータル</div>"; }else if(i==2){ tags +="<br/><div>USニュースサイト </div>"; } tags += '<a href="' + json[i].url + ' "> ' + json[i].name + '</a><br/>'; } $("#show").html(tags); }); ;} </script> </head> <body> <h2>配列、連想配列とJSON <input type="button" id="exe" value="表示 "/><h2> <p id="show"></p> </body> </html> ファイル名：sample6.php <?php $arr[0]["name"] = "Google"; $arr[0]["url"] = "http://www.google.co.jp/"; $arr[1]["name"] ="Yahoo!"; $arr[1]["url"] = "http://www.yahoo.co.jp/"; $arr[2]["name"] = "CBS News"; $arr[2]["url"] = "http://www.cbsnews.com/"; $arr[3]["name"] ="abc News"; $arr[3]["url" ]= "http://abcnews.go.com/"; header("Content-Type: text/javascript; charset=utf-8"); echo json_encode($arr); ?>
- ベストアンサー
- JavaScript
一曲が終わったら次の曲へ
こんにちわただ今フラッシュでmp3プレイヤー的な物を作ってるのですが一曲は再生できるものの一曲が終わったら次の曲へとアクションスクリプトを組むにはどうすればいいのでしょうか？今のプレイヤーにはプレイ、ストップボタンだけの単純な機能がそなわっています var song_sound:Sound = new Sound(); song_sound.attachSound("曲名"); play_btn.onRelease = function() { song_sound.start(); }; stop_btn.onRelease = function() { song_sound.stop(); }; このようになっております。どのようなスクリプトを書き足せばよろしいのでしょうか？また、スクリプトを足す以外に簡易的な作り方などあれば教えてください。説明しているサイトもいろいろ探したのですがなかなかみつかりません（汗サイトなどでも結構なのでよろしくお願いいたします FLASH８ WINDOWS　XP　使用です
- ベストアンサー
- Flash
jquery htmlのcookie保存・表示
まず、やろうとしていることはボタンをクリックし、その中身と同じデータを持つものを xmlから読み込み表示します。次にそこから他のページへ移動して、戻ってきたときに最後に表示していた内容をそのまま表示させたいのです。 crome、ieにて動作確認をさせたいです。現状のソースです、 <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <script language="JavaScript" type="text/javascript" src="../jq/jquery-1.7.2.min.js"></script> <script language="JavaScript" type="text/javascript" src="../jq/jquery.cookie.js"></script> <script type="text/javascript"> $(function(){ if($.cookie("name")){ $("#newbox").html($.cookie("name")); } $('#buttons button').click(function(){ var val = $(this).text(); $.ajax({ url:"index.xml", type:"get", dataType:"xml", timeout:1000, cache:false, error:function(){ alert("error"); }, success:function(xml){ var listdata=""; $(xml).find("list").each(function(){ var name=$(this).find("name").text(); // var imgs=$(this).find("imgs").text(); // var price=$(this).find("price").text(); // $(this).children().each(function(){ if($(this).text()==val){ listdata+='<ul><li>'+name+'</li><li><img src="'+imgs+'" /></li><li>' +price+ '</li></ul>';}}) }); $("#newbox").html(listdata); $.cookie("name",$("#newbox").html()); } }); }) }); </script> </head> <body> <div id="buttons"> <button>600</button><button>700</button><button>800</button><button>900</button> </div> <div id="newbox"></div> </body> --xml-------- <list> <name>いちご</name> <imgs>001.jpg</imgs> <price>600</price> </list> <list> <name>ぶどう</name> <imgs>002.jpg</imgs> <price>700</price> </list> <list> <name>スイカ</name> <imgs>003.jpg</imgs> <price>800</price> </list> <list> <name>メロン</name> <imgs>004.jpg</imgs> <price>900</price> </list> <list> <name>りんご</name> <imgs>005.jpg</imgs> <price>600</price> </list> 　　　　・・・続く -------------- この状態だと、内容が少ない場合は表示されるのですが、内容が多くなると表示されなくなります。基本的なことが間違っているのか、cookieの処理がおかしいのか理由がわからず困っています。どうかご教授お願いいたします。
- ベストアンサー
- JavaScript