質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

930閲覧

JS HTML ボタンを押したとき折り畳みの開閉と同時にカウントを行いたい

kmkr

総合スコア6

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/07/25 13:52

編集2021/07/25 14:02

前提・実現したいこと

実現したいこと
オンラインテストのようにボタンを押した後カウントが始まったと同時に問題(コンテンツ)が見れるようにしたい
別々のボタンを用意すれば簡単だが一つのボタンで二つとも行いたい。
こちらのサイトを参考にボタンの折り畳みの開閉を作成しました。

発生している問題・エラーメッセージ

ボタンを押したときカウントが行われるが、折り畳まれたコンテンツは表示ない。
押す前
押す前
押した後
押した後

該当のソースコード

html

1<!-- bootstrapのcss,jsを読み込む --> 2<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> 3<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> 4<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> 5 6<!-- トリガーとなるリンク&ボタン --> 7<button 8 type="button" 9 data-toggle="collapse" 10 data-target="#collapseExample" 11 aria-expanded="false" 12 aria-controls="collapseExample" 13 value="カウント開始" 14 id="startcount"         15 onclick="startShowing()" 16> 17 ボタンで開閉させる 18</button> 19<!-- /トリガーとなるリンク&ボタン --> 20<input type="button" value="カウント停止" id="endcount" onclick="stopShowing()"> 21<!-- 対象のコンテンツ --> 22<div class="collapse" id="collapseExample"> 23 開閉させるコンテンツ 24 開閉させるコンテンツ 25 開閉させるコンテンツ 26</div> 27<!-- /対象のコンテンツ --> 28 29<p id="PassageArea">(ここにカウントが表示されます)</p> 30 31 32 33 34 <script> 35 var count; // 秒数カウント用変数 36 var PassSec; 37 var TimeLimit=30; 38 // 繰り返し処理の中身 39 function showPassage() { 40 count++; // カウントアップ 41 PassSec = TimeLimit - count ; 42 var msg = "ボタンを押してから " + PassSec + "秒が経過しました。"; // 表示文作成 43 document.getElementById("PassageArea").innerHTML = msg; // 表示更新 44 if(PassSec==0){ 45 stopShowing(); 46 47 } 48 } 49 50 // 繰り返し処理の開始 51 function startShowing() { 52 count = 0; // カウンタのリセット 53 PassageID = setInterval('showPassage()',1000); // タイマーをセット(1000ms間隔) 54 document.getElementById("startcount").disabled = true; // 開始ボタンの無効化 55 } 56 57 // 繰り返し処理の中止 58 function stopShowing() { 59 clearInterval( PassageID ); // タイマーのクリア 60 document.getElementById("startcount").disabled = false; // 開始ボタンの有効化 61 } 62 63</script> 64

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

仕様があいまいなところがありますが・・・

javascript

1<style> 2#collapseExample.collapse{ 3display:none; 4} 5</style> 6<button 7 type="button" 8 data-toggle="collapse" 9 data-target="#collapseExample" 10 aria-expanded="false" 11 aria-controls="collapseExample" 12 value="カウント開始" 13 id="startcount" 14> 15 ボタンで開閉させる 16</button> 17<div class="collapse" id="collapseExample"> 18 開閉させるコンテンツ 19 開閉させるコンテンツ 20 開閉させるコンテンツ 21</div> 22<p id="PassageArea">ここにカウントが表示されます</p> 23<script> 24let timerId; 25let flg=true; 26const counttime=30; 27const target=document.querySelector(startcount.dataset["target"]); 28const toggle=startcount.dataset["toggle"]; 29startcount.addEventListener('click',()=>{ 30 const starttime=new Date().getTime() 31 target.classList.toggle(toggle); 32 if(flg){ 33 timerId=setInterval(()=>{ 34 const time=new Date().getTime() 35 PassageArea.textContent=(counttime-parseInt(time-starttime)/1000); 36 },100); 37 }else{ 38 clearInterval(timerId); 39 } 40 flg=!flg; 41}); 42</script>

投稿2021/07/26 02:10

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kmkr

2021/07/26 03:28 編集

回答ありがとうございます! 質問なのですがscript内のstartcountというのは const startcount = document.getElementById('startcount'); こういうことなのでしょうか?
yambejp

2021/07/26 03:31

idを振ったHTML要素はid名だけでアクセスできます。 ただし、今回は省略しましたがバグを避けるためには const startcount = document.querySelector('#startcount'); のような宣言をしておくのがベターです
kmkr

2021/07/26 04:45

本当にありがとうございます!うまく動作させることができました! しかし、私のコードはどこが良くなかったのかわかりますか?カウントダウン部分のみが書き換えられているのでその箇所なのだと思いますが。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問