重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【GOLF me！】初月無料お試し

つらい・・・

選択することでさらに選択出来るようなテキストボックス

締切済

  • 質問者：az_masa
  • 質問日時：
  • 回答数：2件

<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

  • 回答者： fujillin
  • 回答日時：

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>
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： fujillin
  • 回答日時：

<!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>
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報