jqueryの置き換えについて
- jqueryの導入や基本的な書き方がわかっているが、jsで書いた電卓をjqueryに置き換える際にエラーが出てしまう。
- 書き換え後のコードが欲しい。
- jsで書いた電卓は正常に動いていたが、jqueryに置き換えると動かない。
- ベストアンサー
jqueryの置き換えについて
jsで作った電卓をjqueryに置き換えしなくてはいけなくなったのですが、 jqueryは習ってる最中で何がなんやら書き換えがうまくできません。 jqueryの導入の仕方や基本的な書き方はわかるのですが、書き換えると何かしら必ず定義されていないなどエラーが出てしまいます。ｊｓで書いたものはちゃんと動いていたのにjqueryに書き換えると微動だにしません。 書き換え後のコードを頂けたら幸いです。 html <body class="body1"> <div class="calculator"> <div id="display" value="0">0</div> <div class="commands"> <div class="command is-2col" onclick="calc_func(this)" value="clear">clear</div> <div class="command empty"></div> <div class="command is-operator" onclick="calc_func(this)" value="/">÷</div> <div class="command" onclick="calc_func(this)" value="7">7</div> <div class="command" onclick="calc_func(this)" value="8">8</div> <div class="command" onclick="calc_func(this)" value="9">9</div> <div class="command is-operator" onclick="calc_func(this)" value="*">×</div> <div class="command" onclick="calc_func(this)" value="4">4</div> <div class="command" onclick="calc_func(this)" value="5">5</div> <div class="command" onclick="calc_func(this)" value="6">6</div> <div class="command is-operator" onclick="calc_func(this)" value="-">-</div> <div class="command" onclick="calc_func(this)" value="1">1</div> <div class="command" onclick="calc_func(this)" value="2">2</div> <div class="command" onclick="calc_func(this)" value="3">3</div> <div class="command is-operator" onclick="calc_func(this)" value="+">+</div> <div class="command is-2col" onclick="calc_func(this)" value="00">00</div> <div class="command" onclick="calc_func(this)" value="0">0</div> <div class="command is-equal" onclick="calc_func(this)" value="=">=</div> </div> </div> <body> js function calc_func(button) { // console.log(button); var display = document.getElementById("display");//id名 displayの要素を取得 変数displayに代入 var button_value = button.innerHTML; //button_valueの変数に、buttonの中身を取得 console.log(button_value) if (button_value === "clear") { //押したのがclearなら、displayの中身がinnerHTMLで０に変わる display.innerHTML = "0"; }else if (button_value === "=") { //押したのが＝なら、displayの中身をnew funcで計算して値を返す var replace_value = display.innerHTML.replaceAll("×", "*").replaceAll("÷", "/"); //replaceAllは("対象の文字列","置き換えする文字列")で文字を置き換えできる display.innerHTML = (new Function ("return " + replace_value))(); //押されたキーの内容を判別せず、単純にそのまま文字列として記憶して、計算時に、そのまま文字列の計算結果を返すようにreturnの文字列を付け加える }else if (display.innerHTML === "0" || display.innerHTML === "00") { if (!isNaN(button_value) || button_value === "-") { display.innerHTML = button_value; } }else { if (isNaN(button_value)) { var migihashi = display.innerHTML.slice(-1); if (!isNaN(migihashi)) { display.innerHTML += button_value; } }else { display.innerHTML += button_value; //それ以外の動き +=はdisplay.innerHTML＝display.innerHTML＋button_valueの略し } } } css .calculator { width: 205px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); margin: auto; } #display { width: 205px; background: #5b5b5b; text-align: right; border: 1px solid #000; box-sizing: border-box; color: #fff; font-size: 25px; padding: 5px 10px; } .display.flashing { animation-name: flash; animation-duration: 0.1s; } @keyframes flash { 0% { color: #5b5b5b; } 90% { color: #5b5b5b; } 100% { color: #fff; } } .commands { width: 204px; background: #000; display: flex; flex-wrap: wrap; padding-left: 1px; } .command { width: 50px; height: 45px; background: #ddd; margin: 0 1px 1px 0; text-align: center; padding-top: 10px; box-sizing: border-box; font-size: 18px; } .command.is-operator, .command.is-equal { background: orange; color: #fff; } .command.is-2col { width: 101px; } .command:active { background: #bbb; } .command.is-operator:active, .command.is-equal:active { background: #d37e00; } .command.empty:active { background: #ddd; } #debug { display: none; }
- katakakakaka
- お礼率11% (1/9)
- その他（プログラミング・開発）
- 回答数9
- ありがとう数3
- みんなの回答 （9）
- 専門家の回答
質問者が選んだベストアンサー
補足です。 d=d!="0"? d+button_value:button_value; ここ。 今現在の 変数dが"0"の場合は、button_valueをそのまま代入 "0"以外の場合は、現在のdの後ろに、button_valueを結合しろ！ の意味になります。 if分で同じことを書くと if (d!="0") { d+=button_value; }else{ d=button_value; } という感じ。どうせ変数dしか使ってないなら、1行で済ませちゃえ！ のスタンスで、こうしてます。
その他の回答 (8)
- AsarKingChang
- ベストアンサー率46% (3467/7472)
これね、途中でやめた理由があって。 ”0”+”5”なら、”5”にしてるつもりだと思うんだけど、 今現在の値が、 ”5ｘ”になってた時、”0”だと、”5ｘ0”になるでしょ。 なので、そのまま”２”をいれれば”5ｘ02”って感じで。。 結局、最初の１回目しか、制御できてないわけ。。 私なら、Array()にしますね。 data[0]="123"; data[1]="+-*/";がどれかが入る。 この状態で、”+-*/”を押すと、data[1]を入れ替える。。 なので、"123x" この状態で”+”を押すと、"123+"に変わる。 もし次の文字が、数字なら、 data[2]を作り、"0"で初期化する。 なので、ここで、”5”を入れれば、”0”+”5”先頭が0なので"5"と補正 の方が、良いかもな～って。 最後に"="を押したとき、このArrayをシリアライズ （直線データに戻す） で、今と同じように計算させる。 の方が、スマートかも～って考えてたらやる気がなくなったのね＾＾ ごめんねｗ
- AsarKingChang
- ベストアンサー率46% (3467/7472)
}else if (display === "0" || display === "00") { if (!isNaN(button_value) || button_value === "-") { d=button_value; } }else{ ↑ ここ・・・めちゃくちゃだな＾＾ ただ、それっぽくは動いてるから、おそらく元々不要かもしれん
- AsarKingChang
- ベストアンサー率46% (3467/7472)
<script> $(function () { /* ボタンを押す毎にdisplayは変化しないので、最初に１回でいい */ let display = $('#display'); $(".command").on('click', function() { let button_value = $(this).data("value"); let d = display.text(); if (button_value === "Clear") { d="0"; }else if (button_value === "=") { let d2=d.replace(/÷/g,'/').replace(/×/g,'*'); d=new Function ("return " + d2)(); }else if (display === "0" || display === "00") { if (!isNaN(button_value) || button_value === "-") { d=button_value; } }else{ if (isNaN(button_value)) { let migihashi = d.slice(-1); if (!isNaN(migihashi)) { d=d!="0"? d+button_value:button_value; } }else { d=d!="0"? d+button_value:button_value; } } display.text(d); }); }); </script> これじゃだめ？ だいぶ短くなっちゃったけど＾＾
補足
お早い回答ありがとうございます！！！！ すごい短く短縮されてて凄いです！！！ 自分のコードに取り組んで確認してみます！！！！ 本当にありがとうございます！
- AsarKingChang
- ベストアンサー率46% (3467/7472)
>それが、全然ダメでした汗 あらら＾＾ 明日、時間があったら、書いてくれたソース 実行してみますよ！
補足
お時間取らせてしまってすみません泣 とてもお優しい方で本当にありがたいです！ 全然jqueryについて理解ができていないので、私も色々調べてやってみます！ お手数おかけいたしますが、よろしくお願いいたします！
- AsarKingChang
- ベストアンサー率46% (3467/7472)
ちなみ、完成しました？ 暇なとき、いじってもいいんですが。 すでに終わってたら、悲しいかな～と思って
補足
それが、全然ダメでした汗 指摘いただいたところはある程度わかる範囲で直してみたのですが、 数字や記号がディスプレイに１つしかでなく、計算もされていない、＝を押すとUnexpected identifier at new Function (<anonymous>)というエラーが起きてしまい、全然電卓として機能してません笑 現在までのHTMLとjqueryをお送りします！ｃｓｓは変わらないので端折ります！ HTML <body> <div class="calculator"> <div id="display" data-value="0">0</div> <div class="comm"> <div class="command is-2col" data-value="Clear">Clear</div> <div class="command empty"></div> <div class="command is-operator" data-value="÷">÷</div> <div class="command" data-value="7">7</div> <div class="command" data-value="8">8</div> <div class="command" data-value="9">9</div> <div class="command is-operator" data-value="×">×</div> <div class="command" data-value="4">4</div> <div class="command" data-value="5">5</div> <div class="command" data-value="6">6</div> <div class="command is-operator" data-value="-">ー</div> <div class="command" data-value="1">1</div> <div class="command" data-value="2">2</div> <div class="command" data-value="3">3</div> <div class="command is-operator" data-value="+">＋</div> <div class="command is-2col" data-value="00">00</div> <div class="command" data-value="0">0</div> <div class="command is-equal" data-value="=">＝</div> </div> </div> <body> jquery $(document).ready(function(){ //domが読み込まれたら中の処理を実行 $('.command').on('click',function() { let button_value = $(this).data('value'); console.log(button_value); let display = $('#display'); console.log(display); display.text(button_value); if (button_value === "clear") { display.text("0"); //押したのがclearなら、displayの中身がinnerHTMLで０に変わる }else if (button_value === "=") { //押したのが＝なら、displayの中身をnew funcで計算して値を返す replace_value = display.replaceAll("×", "*").replaceAll("÷", "/"); display.text(new Function ("return " + replace_value))(); //押されたキーの内容を判別せず、単純にそのまま文字列として記憶して、計算時に、そのまま文字列の計算結果を返すようにreturnの文字列を付け加える) }else if (display === "0" || display === "00") { if (!isNaN(button_value) || button_value === "-") { display.html(button_value); } //ディスプレイに0か00が表示される時は、「0」「00」「記号」は押されても入れない //ただし、「数値」が押された時は入れるようする //!isNaN(button_value)で押されたのが「数値」かどうか判断できる //又はbutton_valueが−の時は-と表示する //数値が押された時だけresult.innerHTML = button_valueを実行 }else { if (isNaN(button_value)) { let migihashi = display.slice(-1); if (!isNaN(migihashi)) { display.text() += button_value; } }else { //$(display)[0].text() += button_value; } } //++など複数して出ないようにする //isNaN(button_value)で押されたのが記号か判断 //数値を入力した時は一番下のelseのdisplay.innerHTML += button_valueで数値を入力して終了 //isNaN(button_value)で押されたのが記号と判断した時、記号を入力する条件はディスプレイ右端が数値である必要がある //display.innerHTML.slice(-1)で右端の値を取って!isNaN(migihashi)で右端が数値か判断 //右端が数値、押されたのが記号の場合だけdisplay.innerHTML += button_valueで計算実行 }); });
- AsarKingChang
- ベストアンサー率46% (3467/7472)
まだ完成していませんが、今の時点で？と思った部分を あげておきます。 HTML部分 <div class="display" id="0">0</div> <div class="command is-2col" id="0">Clear</div> <div class="command" id="0">0</div> CSSのセレクタ名であるIDが重複して３回使われている。 <div class="command is-operator" id="÷">÷</div> CSSのセレクタ名としては、id="÷"はまずい。 Jqueryのデータフォーマットにしたほうがいいでしょうね。 JS部分 $("[class *='command']").on('click',function() { //"[class*='command']"の書き方をするとc指定したclassを全て取ってくる こんなことしなくても、 $(".command").on('click',function() { classは元々重複できるので、そのまま".command"でいい。 let replace_value = $('.command is-operator').each(function(){ これは、「クラス」command内にある「タグ」 is-operatorになるので、「クラス」is-operatorの方が適切。.is-operatorに書き換える。 なのだが、そもそもいらない気がするこの処理。 let display = $('.display');//id名 displayの要素を取得 変数displayに代入 その後オブジェクトに対して加減算をしてしまっている。 display += button_value; （さらに、全体にclass displayは１回しかないので、id=displayでいい）JSでのid=..は重複してないよ！って合図にもなるので、わかりやすくなるため。 おまけ、初期値が0 <div class="display" id="0">0</div> なので、例えば「５」を押すと、 ”0”+”5”＝”05”が画面に出てしまう。 などが気になってます。 ひとまず、値の埋め込みは、 <div class="command is-operator" data-value="÷">÷</div> <div class="command" data-value="7">7</div> こんな感じでHTMLに埋め込み $(".command").on('click',function() { let button_value = $(this).data("value"); こんな感じで、受け取るほうがよいでしょう。 これ、思ったより、トラップが多い！（わざと引っ掛かるように作られている問題に感じる）ので、 質問者さんじゃなくて、何かテスト問題かなと思うような、 そんな印象がちょっとありましたね。
補足
とても細かい直しありがとうございます涙 jsをjQueryに直すのは簡単で難しくないと言われたのですが、 単純に同じ意味の単語に書き換えるだけでは実装できず、なぜ簡単と言えるのだろうと思っていました、、。 とにかく、現段階までの修正してくださった所を早速直してみます！
- AsarKingChang
- ベストアンサー率46% (3467/7472)
質問者さんのタイプ（ソースの書き方）がわからないので、 >それを上から1行ずつ変えていくと未定義エラーが起きてしまったりしてどこがどう間違えているのかもわからないので、 エラーが出たら、また相談投げてもらえますか？ 私がソース書くと趣旨と変わる可能性が高いもので。 かなり独特なので＾＾私の書き方。MVC+Objectなもので。 私がわかる範囲では、修正しますよ。
補足
そうですよね汗すみません汗 現在なんとなく自分で途中まで書き換えたものが下記のものなのですが、 まず一つ目のエラーなんですが、=を押すと、Unexpected identifier new Function (<anonymous>)と言うエラーが出てしまいます。 なぜ出てしまうのかわからないです汗 何かわかれば教えていただきたいです！ html <body> <div class="calculator"> <div class="display" id="0">0</div> <div class="comm"> <div class="command is-2col" id="0">Clear</div> <div class="command empty"></div> <div class="command is-operator" id="÷">÷</div> <div class="command" id="7">7</div> <div class="command" id="8">8</div> <div class="command" id="9">9</div> <div class="command is-operator" id="÷">×</div> <div class="command" id="4">4</div> <div class="command" id="5">5</div> <div class="command" id="6">6</div> <div class="command is-operator" id="-">ー</div> <div class="command" id="1">1</div> <div class="command" id="2">2</div> <div class="command" id="3">3</div> <div class="command is-operator" id="+">＋</div> <div class="command is-2col" id="00">00</div> <div class="command" id="0">0</div> <div class="command is-equal" id="=">＝</div> </div> </div> <body> CSS .calculator { width: 205px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); margin: auto; } .display { width: 205px; background: #5b5b5b; text-align: right; border: 1px solid #000; box-sizing: border-box; color: #fff; font-size: 25px; padding: 5px 10px; } .display.flashing { animation-name: flash; animation-duration: 0.1s; } @keyframes flash { 0% { color: #5b5b5b; } 90% { color: #5b5b5b; } 100% { color: #fff; } } .comm { width: 204px; background: #000; display: flex; flex-wrap: wrap; padding-left: 1px; } .command { width: 50px; height: 45px; background: #ddd; margin: 0 1px 1px 0; text-align: center; padding-top: 10px; box-sizing: border-box; font-size: 18px; } .command.is-operator, .command.is-equal { background: orange; color: #fff; } .command.is-2col { width: 101px; } .command:active { background: #bbb; } .command.is-operator:active, .command.is-equal:active { background: #d37e00; } .command.empty:active { background: #ddd; } #debug { display: none; } jquery $(document).ready(function(){ //domが読み込まれたら中の処理を実行 $("[class *='command']").on('click',function() { //"[class*='command']"の書き方をするとc指定したclassを全て取ってくる //console.log($("[class *='command']")) let display = $('.display');//id名 displayの要素を取得 変数displayに代入 let button_value = $(this).attr('id'); //button_valueの変数に,"[class *='command']"のvalueを代入 display.text(button_value); if (button_value === "clear") { //押したのがclearなら、displayの中身がinnerHTMLで０に変わる //console.log(button_value === "clear") }else if (button_value === "=") { //押したのが＝なら、displayの中身をnew funcで計算して値を返す let replace_value = $('.command is-operator').each(function(){ let txt = $(this).html(); $(this).html( txt.replace(/÷/g,'/').replace(/×/g,'*') ); console.log(replace_value) }); display.html(new Function ("return " + replace_value))(); //押されたキーの内容を判別せず、単純にそのまま文字列として記憶して、計算時に、そのまま文字列の計算結果を返すようにreturnの文字列を付け加える) }else if (display === "0" || display === "00") { if (!isNaN(button_value) || button_value === "-") { display.html(button_value); } }else { if (isNaN(button_value)) { let migihashi = display.slice(-1); if (!isNaN(migihashi)) { display += button_value; } }else { display += button_value; //それ以外の動き +=はdisplay.innerHTML＝display.innerHTML＋button_valueの略し } } }); });
- AsarKingChang
- ベストアンサー率46% (3467/7472)
たったの1行で全部治ります！。 <script> $(function () { function calc_func(button) { // 省略 } window["calc_func"] = calc_func; ←これを追加するだけ！ }); </script> これで、グローバル空間に、calc_funcという名前が 出るので、onclickのリスナーから見えるようになり、 動作するという理屈です。
補足
すみません、説明不足でした汗 例えば、functionとかも＄つけたり、idやclassも＄で呼び出したり、innerHTMLなどがHTML()になったり、とにかくjqueryに変えられる所は全部変えなければいけなくて、、。 それを上から1行ずつ変えていくと未定義エラーが起きてしまったりしてどこがどう間違えているのかもわからないので、 その書き換えたコードを頂けたらと思っています汗
関連するQ&A
- HTML・CSS ボタンの表示
<div class="item"> <tr> <td><input type="button" value="サンドウィッチ" onclick="get_calc(this)"></td> <td><input type="button" value="おにぎり" onclick="get_calc(this)"></td> <td><input type="button" value="お茶" onclick="get_calc(this)"></td> <td><input type="button" value="お弁当" onclick="get_calc(this)"></td> </tr> </div> ボタンを画面の50％の幅に均一の大きさで表示したです． CSSわかる方，教えてください！お願いします！
- ベストアンサー
- CSS
- jQuery読み込めない
アコーディオンメニューを導入しようと思い、こちらのサイトの https://b-risk.jp/blog/2021/11/accordion/#1 1つ開くと他の項目が閉じるアコーディオンのコードをコピペしましたが、表示はされますが動きません。 コードはコピペしただけなので、まったく変更していません。 たぶん、jQueryを読み込んでいないのだと思います。 Chromeのデベロッパーツールを開きConsoleタブが開いたら Failed to load resource: the server responded with a status of 404 (Not Found) Failed to load resource: the server responded with a status of 400 (Bad Request) というメッセージが出ます。 jQuery自体は</head>の上に <script type="text/javascript" src="js/jquery-3.7.1.min.js"></script> と記載し動作は確認済みです。 アコーディオンメニューのjQueryコードは</body>の上に記載しています。 コードは次のとおりです。 ■HTML <div class="qa"> <div class="q">Q1.○○？</div> <div class="a">A1.✕✕！</div> </div> <div class="qa"> <div class="q">Q2.○○？</div> <div class="a">A2.✕✕！</div> </div> <div class="qa"> <div class="q">Q3.○○？</div> <div class="a">A3.✕✕！</div> </div> <div class="qa"> <div class="q">Q4.○○？</div> <div class="a">A4.✕✕！</div> </div> <div class="qa"> <div class="q">Q5.○○？</div> <div class="a">A5.✕✕！</div> </div> ■CSS .qa { font-size: 20px; .q { background-color: mediumseagreen; height: 60px; padding: 15px 40px 15px 15px; position: relative; cursor: pointer; &:before { position: absolute; content: ""; display: block; width: 10px; height: 2px; background-color: #fff; right: 15px; top: 50%; transform: translate(0, -50%); } &:after { position: absolute; content: ""; display: block; width: 10px; height: 2px; background-color: #fff; right: 15px; top: 50%; transform: translate(0, -50%) rotate(90deg); } } .q.active { &:after { display: none; } } .a { background-color: greenyellow; height: 60px; display: none; padding: 15px; } } ■jQuery $('.q').click(function(){ $(this).siblings('.a').stop().slideToggle(); $('.q').not($(this)).siblings('.a').slideUp(); $(this).toggleClass('active'); $('.q').not($(this)).removeClass('active'); }); 以上、よろしくお願いいたします。
- ベストアンサー
- JavaScript
- ラジオボタンとフォーム検索の結び付け
スマホ用にゲームの攻略サイトを作りたいと思っています。 ■やりたいこと■ 値段はわかっているが名前がわからないアイテムの判別。 まずラジオボタンで「武器」か「防具」を選びます。 そして値段を入れると 「武器・600」＝勇者の剣 「防具・600」＝盾 といったように選んだラジオボタンによって同じ数字でも 表示結果を変えたいと考えています。 ラジオボタン「武器」を選ぶと検索用ボタン「button_1」が表示される。 ラジオボタン「防具」を選ぶと検索用ボタン「button_2」が表示される。 button_1と2の切り分けによってfunctionの切り分けを行っている状態です。 ■問題点■ 「防具」を押す→600を入力→「盾」が表示される→「武器」を押す→「勇者の剣」が表示されてしまう。 チェックボックスの選択を変えても表示結果は再度検索するまでそのまま、 もしくはチェックボックスを選び直した際は前回入力した数値は消えるなど対策を取りたいです。 そもそも他にもっといいやり方があるなど改善案をご教授いただきたいです。 よろしくお願いします。 【HTML】 <body> <div class="top_form"> <form name="test"> <label><input type="radio" name="radio_btn" value="buki" onclick="func();" checked="checked" />武器</label> <label><input type="radio" name="radio_btn" value="bougu" onclick="func();" />防具</label><br> <input id="test_form" type="tel" name="num"> <input id="button_1" type="button" value="button_1" onClick="func()"> <input id="button_2" type="button" value="button_2" onClick="func2()"> </form> </div> <div id="result"></div> </body> 【CSS】 <style> .top_form { width:300px; margin:0 auto; margin-top:30px; } #test_form { width:250px; height:30px; font-size:14px; margin-top:14px; } #button_1 { text-decoration: none; -moz-appearance: none; -webkit-appearance: none; appearance: none; width:90px; height:44px; margin-top:15px; } #button_2 { text-decoration: none; -moz-appearance: none; -webkit-appearance: none; appearance: none; width:90px; height:44px; margin-top:15px; background-color:#36C; } #result { border:solid 1px #666666; margin:0 auto; height:50px; width:200px; font-size:20px; line-height:50px; text-align:center; margin-top:30px; } </style> 【javascript】 <script> function func() { radio = document.getElementsByName('radio_btn'); if (radio[0].checked) { //button_1が出る document.getElementById('button_1').style.display = ""; document.getElementById('button_2').style.display = "none"; } else if (radio[1].checked) { //button_2が出る document.getElementById('button_1').style.display = "none"; document.getElementById('button_2').style.display = ""; } var url = ""; if (document.test.num.value == "600") { url = "勇者の剣"; } document.getElementById('result').innerHTML = url; } window.onload = func; function func2() { radio = document.getElementsByName('radio_btn'); var url = ""; if (document.test.num.value == "600") { url = "盾"; } document.getElementById('result').innerHTML = url; } </script>
- ベストアンサー
- JavaScript
- CSSでメニューバー
初心者の質問ですいません。 CSSでこのようにボックス分けして * { margin : 0 ; padding : 0 ; } body { width : 100% ; } #my_body{margin:0 auto; width:875px;} #my_header { width : 100% ; height : 80px ; } #my_header2{ width : 100% ; background-color: #0080ff;} #my_navigation{float:left; width:150px; background-color: #0080ff; min-height: 1000px;} #my_contents{float:left; width:725px; background-color: #e5f6ff; min-height: 1000px;} #my_footer { width : 100% ; clear : both ; background-color: #0080ff; } HTMLのコード <div id="my_body"> <div id="my_header">一番上のタイトルとグラデーション</div> <div id="my_header2"> グラデーション <style type="text/css"> body { background-image: url("縦長の写真"); background-repeat: repeat-x; } </style> メニューバー <form> <input type="button" value="" class="li01" style="float:left;" onClick="URL'" /> <input type="button" value="" class="li02" style="float:left;" onClick="URL'" /> <input type="button" value="" class="li03" style="float:left;" onClick="URL'" /> <input type="button" value="" class="li04" style="float:left;" onClick="URL'" /> <input type="button" value="" class="li05" onClick="URL'" /> </form> </div> 左のメニューバー <div id="my_navigation"> <div id="mynavi"> </div> </div> 本文 <div id="my_contents"> <div id="mymain"> </div> </div> フッダー <div id="my_footer"></div> </div> これで、my_header2で指定したグラデーションがメニューバーの両側に表示されると思うのですが、グラデーションが表示されません。 初心者なので根本的な間違えを起こしていたらすみません。 なぜ表示されないか教えていただけませんか。 長文失礼しました。
- 締切済み
- HTML
- javascript クイズ
こちらの http://okwave.jp/qa/q4105194.html 回答のNo.4の回答者様のソースコードなのですが <html> <head><style>.hid{display:none} .disp{display:block}</style></head> <body> <div id="s0">Start!!<input type="button" value="click" onClick="view();$('s0').className='hid';"></div> <div id="mn"></div> <div id="s1" class="hid"> Q1.どれを選ぶ？ <input type="button" value="A" onClick="seikai()"> <input type="button" value="B" onClick="hazure()"> <input type="button" value="C" onClick="hazure()"> </div> <div id="s2" class="hid"> Q2.どれを選ぶ？ <input type="button" value="A" onClick="seikai()"> <input type="button" value="B" onClick="hazure()"> <input type="button" value="C" onClick="hazure()"> </div> <div id="s3" class="hid"> Q3.どれを選ぶ？ <input type="button" value="A" onClick="seikai()"> <input type="button" value="B" onClick="hazure()"> <input type="button" value="C" onClick="hazure()"> </div> <div id="s4" class="hid"> Q4.どれを選ぶ？ <input type="button" value="A" onClick="seikai()"> <input type="button" value="B" onClick="hazure()"> <input type="button" value="C" onClick="hazure()"> </div> <div id="s5" class="hid"> Q5.どれを選ぶ？ <input type="button" value="A" onClick="seikai()"> <input type="button" value="B" onClick="hazure()"> <input type="button" value="C" onClick="hazure()"> </div> <div id="hz" class="hid"> はずれでした！ <input type="button" value="次に進む" onClick="nextq()"> </div> <div id="sk" class="hid"> 正解です！ <input type="button" value="次に進む" onClick="nextq()"> </div> <script> var n=3; var q=5; var f=[]; var l=[]; var c=0; var cntc=0; window.onload=function(){ for(var i=0;i<n;i++){ do x=Math.floor(Math.random()*q)+1; while(f[x]) f[x]=true;l[i]=x; } } function view(){$('s'+l[c]).className='disp';$('mn').innerHTML=c+1+"問目";} function $(o){ return document.getElementById(o); } function hazure(){ $('hz').className='disp';} function seikai(){ $('sk').className='disp'; cntc++;} function nextq(){ $('sk').className='hid'; $('hz').className='hid'; $('s'+l[c]).className='hid'; if(++c>=n) owari(); else view(); } function owari(){ $('mn').innerHTML='正解数は、'+cntc; } </script> このままですと正解と不正解のボタンがそれぞれ一回ずつ押せてしまいます これを正解、不正解のどちらか一回しか押せないようにするにはどうすればよろしいでしょうか？ よろしくお願いします。
- ベストアンサー
- JavaScript
- JavaScript表示切替の問題
ボタンを押すたびに、こんにちはとこんばんはが切り替わるようにしたいのですが、 切り替わりません。なぜかわかる方がいたら教えて頂けると助かります。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <div id="1">こんにちは</div> <input type="button" value="切替" onclick="func_switch()"> <script language="javascript" type="text/javascript"> function func_switch(){ if(document.getElementById(1).innerHTML="こんにちは"){ document.getElementById(1).innerHTML="こんばんは"; } else{ document.getElementById(1).innerHTML="こんばんは"; } } </script> </body> </html>
- ベストアンサー
- JavaScript
- テンキーで「0.1」を打つと「.1」になる
HTMLページにテンキーを打つと数字が出るといったものをしたくて、検索しましたところ、参考サイトを見つけました。 https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q13197413368 「.」を追加したソースが下記になります。 「0.1」とテンキーを打つと「.1」になってしまいます。「0.1」になる方法を教えて下さいますか？ 宜しくお願いします。 <style type="text/css">table { border: 0px; margin: 0 auto; border-collapse: collapse; } div#cc { text-align: center; } input { font-size: 12px; margin: 0; padding: 0; } input.key { width: 32px; font-family: monospace; font-size: 12px; } </style> </head> <body> <div id="cc"> <form name="myForm" action="#"> <input name="tx1" size=24 tabindex=1 maxlength=20 value="" onClick="selecttext(this)"><br> <input name="tx2" size=24 tabindex=2 maxlength=20 value="" onClick="selecttext(this)"><br> <input name="tx3" size=24 tabindex=3 maxlength=20 value="" onClick="selecttext(this)"><br> <hr> <table> <tr> <td><input type="button" class="key" value="7" onClick="keyEvent('7')"></td> <td><input type="button" class="key" value="8" onClick="keyEvent('8')"></td> <td><input type="button" class="key" value="9" onClick="keyEvent('9')"></td> </tr> <tr> <td><input type="button" class="key" value="4" onClick="keyEvent('4')"></td> <td><input type="button" class="key" value="5" onClick="keyEvent('5')"></td> <td><input type="button" class="key" value="6" onClick="keyEvent('6')"></td> </tr> <tr> <td><input type="button" class="key" value="1" onClick="keyEvent('1')"></td> <td><input type="button" class="key" value="2" onClick="keyEvent('2')"></td> <td><input type="button" class="key" value="3" onClick="keyEvent('3')"></td> </tr> <tr> <td><input type="button" class="key" value="0" onClick="keyEvent('0')"></td> <td><input type="button" class="key" value="." onClick="keyEvent('.')"></td> <td><input type="button" class="key" value="←" onclick="oneClear()"></td> <td><input type="button" class="key" value="CA" onclick="allClear()"></td> </tr> </table> </form> </div> <script type="text/javascript"> var t; selecttext(document.myForm.tx1); function selecttext(o) { t = o; } function keyEvent(c) { t.value = (t.value=='0')? c: t.value+c; } function allClear() { t.value = ''; } function oneClear() { t.value = t.value.substring(0,t.value.length-1); } </script> </body>
- ベストアンサー
- JavaScript
- JQUERY のEmpty()処理について
JQUERY のEmpty()処理について 次のコードで$('#board').empty(); 後に追加作成した要素はクリックに反応しないのですが、対応の方法をお教えください。 <html><head><title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="subf/jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function (){ $('#board').append('<div id="card1" class="card"'); $('#card1').html("Card1"); $('#board').append('<div id="card2" class="card"'); $('#card2').html("Card2"); $('.card').click(function(){ alert($(this).attr("id")); }); }); function removeObj(){ $('#board').empty(); $('#board').append('<div id="card3" class="card"'); $('#card3').html("Card3"); } </script> </head> <body> <form><input type='button' onclick='removeObj()' value='Reset'></form> <div id="board" style="WIDTH: 10%; TOP: 100px; HEIGHT: 100px; BACKGROUND-COLOR: #ccff33"></div> </body></html>
- 締切済み
- JavaScript
- NN4.78で動きません・表示されません
こんにちは、二つ質問させて下さい。 色々探してみたのですが、原因がわかりません。 １）<INPUT TYPE="button" value="クリック" onClick="klicken('hyouzi')" tabindex=1 style="color:#000000;border:solid 1px #ffffff;background:#ffffff"> <input type="button" value="閉じる" onClick="window.close()" tabindex=1> この二つがNN4.78で表示されません。とほほさんで調べたらNN4でも動作するようなんですが・・・何が間違っているのでしょうか？ ２）innerHTML内で改行をしたいのですが、できないでしょうか？ どちらかでもご存知の方いらっしゃいましたら教えて下さい、お願いします。
- ベストアンサー
- JavaScript
- jQueryを利用してのランダム表示について
jQueryを学習しています。学習し始めてから1ヵ月程度になります。 途中まで考えたのですが、次にどうしたらいいか検討がつきません。 基本的なこともあまりわかっていない状況での質問で申し訳ありません。 どなたかご教授のほどお願いいたします。 考えていることは以下になります。 ・Nextのボタンを押すとランダムでclass=boxの内容を１つ表示したい ・再度、Nextのボタンを押すと表示されていたものが消えて、別のclass=boxを表示したい //////////////// スクリプト //////////////// <script type="text/javascript"> var a = ".box" $(function(){ $(a).hide(); }); $(function(){ $("#tugi").click( function(){ var items = $(a).get().sort(function() { return Math.round(Math.random()) ; }).slice(0, 1); $(items).show(); }); }); $(function(){ $(".answer").hide(); }); $(function(){ $(".kirikae").click( function(){ $(this).next().toggle(); }); }); </script> //////////////// HTML //////////////// <body> <div id="wrap"> <input type="button" value="Next"id="tugi"/> <div id="1" class="box"> 問題1 <br /> <input type="button"value="答えの表示" class="kirikae"/> <div class="answer"> 答え1 <!-- /div .answer --></div> <!-- /div#1 --></div> <div id="2" class="box"> 問題2<br /> <input type="button"value="答えの表示" class="kirikae"/> <div class="answer"> 答え2 <!-- /div .answer --></div> <!-- /div#2 --></div> <div id="3" class="box"> 問題3<br /> <input type="button"value="答えの表示" class="kirikae"/> <div class="answer"> 答え3 <!-- /div .answer --></div> <!-- /div#3 --></div> <div id="4" class="box"> 問題4<br /> <input type="button"value="答えの表示" class="kirikae"/> <div class="answer"> 答え4 <!-- /div .answer --></div> <!-- /div#4 --></div> <!-- /div#wrap --></div> </body>
- 締切済み
- JavaScript
お礼
本当にご丁寧に何から何までありがとうございました泣 先ほど自分のコードに入れてみたら無事できました泣 本当に感謝です！！ ささやかですがチップも送らせていただきます！！ ありがとうございました！！！！！