<html>
<head>
<TITLE>フロー</TITLE>
<script type="text/javascript">
function clicli(){
document.frm.target.value = "あああ";←ここにあああと選択ボタンが表示されるようにしたい
}
</script>
<body>
<form name="frm"> ←ここも枠内に文字とその下に選択ボタンが表示されるようにしたい
<input type="button" value="実行" onclick="clicli()" />
<input type="text" name="target">
</form>
</body>
</html>
枠(<p><div>のテキストボックスでもいいのですが)内に文章が表示されその下にボタンではなくてもCSS偽装でボタンのようにみえるリンクでもいいのですが表示され、そのボタンをクリックするとまた文章とボタンが表示されるようにしたいと思ってます。ようするに選択フローのように進んで行きたいのです。自分の今のレベルですとhtmlファイルを沢山作りリンクで入れ替えて行く方法しか出来ません。この方法だと1~2行の文章のhtmlファイルを作らないといけないので大変でそれでいろいろ調べていたら過去の質問で上記のようなのを見つけてこの方法ならなんと出来るかなと思いましたが、やはり自分の能力では無理でした。すいませんが誰か助けてくださいお願いいたします。
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
No1です。
説明を書いた書いたつもりが、テストしたHTMLだけを投稿しちゃったみたいです。
すみませんでした。
ついでにもう少し使いやすい(であろう)ように修正してみました。
No1は無いものとして・・・ご質問の内容ってこんな感じのことでしょうか。
ボタンは疑似要素でも良いのですが、クリックを特定するのが面倒なので、普通のボタン要素にしています。
<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style type="text/css">
#target { list-style-type:none; padding:0; }
#target li+li { display:none; }
#target li { min-height:3em; margin:0.3em; border:1px solid gray; }
#next { display:block; font-size:0.8em; width:5em; margin:-0.3em 1em auto auto; }
</style>
<script type="text/javascript">
document.addEventListener('click', function(e){
let t = e.target, i = 0, elm;
if(t.id !== "next") return;
let elms = document.querySelectorAll("#target li");
for(i=0; elm = elms[i]; i++){
if(window.getComputedStyle(elm).display == "none"){
elms[i].style.display = "block";
if(i+1 == elms.length) t.style.display = "none";
break;
}
}
});
</script>
</head>
<body>
<ul id="target">
<li><p>最初の文章</p></li>
<li><p>2番目の文章</p></li>
<li><p>3番目の文章</p></li>
<li><p>4番目の文章</p></li>
<li><p>5番めの文章</p></li>
<li><p>6番めの文章</p></li>
</ul>
<button type="button" value="" id="next">次へ</button>
</body>
</html>
No.1
- 回答日時:
<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<style type="text/css">
#target { list-style-type:none; padding:0; }
#target li+li { display:none; }
#target li p{ min-height:3em; margin:0.3em 4.5em 0 0; border:1px solid gray; }
#next { display:block; font-size:0.8em; width:4em; margin:-2em 0.5em auto auto; }
</style>
<script type="text/javascript">
document.addEventListener('click', function(e){
let t = e.target;
if(t.id !== "next") return;
let elms = document.querySelectorAll("#target li");
let n = Array.prototype.indexOf.call(elms, t.parentNode);
if(elms[n+1]){
elms[n+1].style.display = "block";
elms[n+1].appendChild(t);
}
if(n + 2 >= elms.length) t.style.display = "none";
});
</script>
</head>
<body>
<ul id="target">
<li><p>最初の文章</p>
<button type="button" value="" id="next">次へ</button>
</li>
<li><p>2番目の文章</p></li>
<li><p>3番目の文章</p></li>
<li><p>4番目の文章</p></li>
<li><p>5番めの文章</p></li>
<li><p>6番めの文章</p></li>
</ul>
</body>
</html>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- PHP 入力した部分を表示させたまま(保持)するにはどうすれば良いでしょうか? 1 2023/01/25 11:14
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
リストを2つに分割して、それぞ...
-
<li>で並べたメニューのリンク...
-
ナビゲーションバーを端まで伸...
-
透明のボックスにリンクを貼りたい
-
レスポンシブWebデザインでリン...
-
3番目のBoxだけずれる
-
メニューの横並びで改行されて...
-
<ul><li></li></ul>にするメリ...
-
CSSによるタブメニューの構築に...
-
CSS li float 2列組み
-
ulタグやliタグの中でbrタグ...
-
<ul>タグを使うと勝手に<p>...
-
リストマーカーをボックス内に...
-
円形の配置にするコーディング...
-
CGI:HTML表示結果のカスタマイ...
-
マージソートの計算量について-...
-
htmlの文字が縦書きになる
-
個別にリンクの色を変える方法
-
W3Cのソースコードの検証サービ...
-
cssのfloatについて
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<table>の高さ固定。情報増加時...
-
リストマーカーをボックス内に...
-
画像にリンクを張ると画像がず...
-
HTMLで組織図を作成する方法
-
レスポンシブWebデザインでリン...
-
ulタグやliタグの中でbrタグ...
-
ポップアップメニューを表のよ...
-
liタグの中に<p>タグやら<dl>を...
-
リストの数字のフォントサイズ...
-
<ul>~</ul>が二つ続くと間に改...
-
html <ul></ul>の並びで一行空...
-
ulとliで囲った文字の一部を変...
-
<ul><li></li></ul>にするメリ...
-
番号付きリスト(<Ol><Li>・・...
-
html/cssの、navを2段にする...
-
display:table;を多段表示させたい
-
HTML5のfooterに見出しを付けて...
-
divタグ内のコンテンツが重なっ...
-
リストを2つに分割して、それぞ...
-
ページを開いているときのリン...
おすすめ情報