電子書籍の厳選無料作品が豊富！

急いでいます！

javascriptについて

解決済

  • 質問者：sssssaakkkgg
  • 質問日時：
  • 回答数：6件

javascriptを使用して簡単なツールを作成したいです。
先日、javascriptについて質問をさせて頂き、ほとんど完成まで至ったのですが、検索ボタンを押した際に、結果が<input type="text" size="16" name="waku">枠部分に表示させるようにするにはどのようにしたら良いのでしょうか？リセットを押した時に、表示された文も消えるようにしたいです。また、表示させる文字の色を変えたい場合はどのようにすればいいのか教えてください。度々で申し訳ありませんが、再度文を教えて頂けると助かります。お願い致します。
現状このような感じです。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>サンプル</title>
</head>
<body>
<h1>サンプル</h1>
<script>
function ryouri(f){
var list={
"卵":{"焼く":"目玉焼き","ゆでる":"ゆで卵"},
"じゃがいも":{"焼く":"焼きイモ","蒸す":"ふかしイモ"},
"にんじん":{}
};
var zairyo=f.elements["zairyo"].value;
var chouri=f.elements["chouri"].value;
var text="";
if(typeof(list[zairyo])=="undefined" || typeof(list[zairyo][chouri])=="undefined"){
text="未設定";
}else{
text=list[zairyo][chouri];
}
document.getElementById("viewspace").innerHTML=text;
return false;
}
</script>
<form onsubmit="return ryouri(this);">
<select name="zairyo">
<option value="">== 材料 ==</option>
<option value="卵">卵</option>
<option value="じゃがいも">じゃがいも</option>
<option value="にんじん">にんじん</option>
</select><br><br>
<select name="chouri">
<option value="">== 調理 ==</option>
<option value="焼く">焼く</option>
<option value="ゆでる">ゆでる</option>
<option value="蒸す">蒸す</option>
</select><br><br>
<input type="submit" name="search" value=" 検索" />
<input type="reset" value="リセット">
<div id="viewspace"></div>
<br>
<input type="text" size="16" name="waku">
</form>
</body>
</html>

質問者からの補足コメント

  • うーん・・・

    度々の御回答ありがとうございます！
    何度も申し訳ありませんが、リセットを押すと、枠の表示内容も消えるようにするにはどのようにしたら良いのでしょうか？

    No.1の回答に寄せられた補足コメントです。 補足日時：2016/01/26 22:14
    通報する

  • うーん・・・

    大変申し訳ありませんでした(;O;)
    ちゃんと消えました！ありがとうございます！！
    本当にいろいろ申し訳ないのですが、
    表示の文字色を変えたい時はどうすれば良いですか？

      補足日時：2016/01/26 22:50
    通報する

  • うーん・・・

    回答本当にありがとうございます！
    文字の色をつけたいのは、
    var list={
    "卵":{"焼く":"目玉焼き","ゆでる":"ゆで卵"},
    「目玉焼き」や「ゆで卵」の部分です。
    また、
    <input type="text" size="20"name="waku" style="width:200px;height:50px;">
    の部分に表示させる「目玉焼き」に「味付けは・・・」の文を改行して表示させたいのですが、<br>を使用してもそのまま表示されてしまいます。
    どのようにしたらよいのでしょうか？
    本当に度々すいません(:_;)

    No.3の回答に寄せられた補足コメントです。 補足日時：2016/01/26 23:22
    通報する

  • うーん・・・

    回答本当にありがとうございます！!
    ちなみになんですが、一番最初に教えていただいた、
    <div　id="viewspeace">ここに表示</div>　
    余りのスペースに表示されるものですが、こちらもリセットボタンを押すと表示された文を消すことは可能なのでしょうか？
    消すにはどのようにしたらよいのかぜひ知りたいです。
    大変じゃなければ、教えて頂きたいです！

    No.4の回答に寄せられた補足コメントです。 補足日時：2016/01/26 23:52
    通報する
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (6件)

No.5ベストアンサー

  • 回答者： yambejp
  • 回答日時：

><div　id="viewspeace">ここに表示</div>　


>リセットボタンを押すと表示された文を消す

divタグはフォームから直接参照できないので、idを指定して中身を書き換えます
onresetがつかえるでしょう

<script>
function ryouri(f){
var list={
"卵":{"焼く":"目玉焼き","ゆでる":"ゆで卵"},
"じゃがいも":{"焼く":"焼きイモ","蒸す":"ふかしイモ"},
"にんじん":{}
};
var zairyo=f.elements["zairyo"].value;
var chouri=f.elements["chouri"].value;
var text="";
if(typeof(list[zairyo])=="undefined" || typeof(list[zairyo][chouri])=="undefined"){
text="未設定";
}else{
text=list[zairyo][chouri];
text+="\n味付けは・・・";
}
f.elements["waku"].value=text;
document.getElementById("waku").innerHTML=text;
return false;
}
function reset_waku(){
document.getElementById("waku").innerHTML="";
}
</script>
<form onsubmit="return ryouri(this);" onreset="reset_waku();">
<select name="zairyo">
<option value="">== 材料 ==</option>
<option value="卵">卵</option>
<option value="じゃがいも">じゃがいも</option>
<option value="にんじん">にんじん</option>
</select><br><br>
<select name="chouri">
<option value="">== 調理 ==</option>
<option value="焼く">焼く</option>
<option value="ゆでる">ゆでる</option>
<option value="蒸す">蒸す</option>
</select><br><br>
<input type="submit" name="search" value=" 検索" />
<input type="reset" value="リセット">
<br>
<textarea size="20" name="waku" style="width:200px;height:50px;color:red;"></textarea>
<div id="waku"style="white-space:pre;color:blue;"></div>
</form>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとう

何度も何度も本当にありがとうございました！！
物凄く助かりました！
本当にすごいですね！！

また、困った時は助けて頂けると嬉しいです！
ありがとうございました！

通報する
お礼日時：2016/01/27 22:10

No.6

  • 回答者： gao57830
  • 回答日時：

<!DOCTYPE html>


<html lang="ja">
<head>
<title>サンプル</title>
</head>
<body>
<h1>サンプル</h1>
<style type="text/css">
textarea {
resize: none;
}
</style>
<script>
function ryouri(f){
var list={
"卵":{"焼く":"目玉焼き","ゆでる":"ゆで卵"},
"じゃがいも":{"焼く":"焼きイモ","蒸す":"ふかしイモ"},
"にんじん":{}
};
var iro={
"目玉焼き":"red",
"ゆで卵":"lime",
"焼きイモ":"green",
"ふかしイモ":"blue"
};
var zairyo=f.elements["zairyo"].value;
var chouri=f.elements["chouri"].value;
var txt="";
if(typeof(list[zairyo])=="undefined" || typeof(list[zairyo][chouri])=="undefined"){
txt="未設定";
}else{
txt=list[zairyo][chouri];
}
var obj=document.getElementsByName("waku")[0];
if(typeof(iro[txt])=="undefined") {
obj.style.color="black";
} else {
obj.style.color=iro[txt];
}
obj.value="味付けは・・・\n"+txt;
return false;
}
</script>
<form onsubmit="return ryouri(this);">
<select name="zairyo">
<option value="">== 材料 ==</option>
<option value="卵">卵</option>
<option value="じゃがいも">じゃがいも</option>
<option value="にんじん">にんじん</option>
</select><br><br>
<select name="chouri">
<option value="">== 調理 ==</option>
<option value="焼く">焼く</option>
<option value="ゆでる">ゆでる</option>
<option value="蒸す">蒸す</option>
</select><br><br>
<input type="submit" name="search" value=" 検索" />
<input type="reset" value="リセット">
<br>
<textarea cols="16" rows="2" name="waku" readonly></textarea>
</form>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

助かりました

御回答ありがとうございます！
みなさん本当にすごいです！！
迷ったのですが、一番最初に回答頂いた方をベストアンサーとさせて頂きます

通報する
お礼日時：2016/01/27 22:13

No.4

  • 回答者： yambejp
  • 回答日時：

＞文を改行して表示させたい



inputタグでは改行は無理、テキストエリアで処理してください
ざっくりこんな感じ・・・

<script>
function ryouri(f){
var list={
"卵":{"焼く":"目玉焼き","ゆでる":"ゆで卵"},
"じゃがいも":{"焼く":"焼きイモ","蒸す":"ふかしイモ"},
"にんじん":{}
};
var zairyo=f.elements["zairyo"].value;
var chouri=f.elements["chouri"].value;
var text="";
if(typeof(list[zairyo])=="undefined" || typeof(list[zairyo][chouri])=="undefined"){
text="未設定";
}else{
text=list[zairyo][chouri];
text+="\n味付けは・・・";
}
f.elements["waku"].value=text;
return false;
}
</script>
<form onsubmit="return ryouri(this);">
<select name="zairyo">
<option value="">== 材料 ==</option>
<option value="卵">卵</option>
<option value="じゃがいも">じゃがいも</option>
<option value="にんじん">にんじん</option>
</select><br><br>
<select name="chouri">
<option value="">== 調理 ==</option>
<option value="焼く">焼く</option>
<option value="ゆでる">ゆでる</option>
<option value="蒸す">蒸す</option>
</select><br><br>
<input type="submit" name="search" value=" 検索" />
<input type="reset" value="リセット">
<br>
<textarea size="20" name="waku" style="width:200px;height:50px;color:red;"></textarea>
</form>
この回答への補足あり
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： yambejp
  • 回答日時：

>表示の文字色を変えたい時はどうすれば良いですか？



どこの文字色を、どのように変えたいのでしょうか？
たとえばwakuのところを赤くするなら
<input type="text" size="16" name="waku" id="waku">

などidを振っておいて、スタイルシートなどで色をつけます
<style>
#waku{color:red;}
</style>

※スタイルシートを外部化したりもできます
この回答への補足あり
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： yambejp
  • 回答日時：

>枠の表示内容も消えるよう



え？いまのソースのままで消えますよね？
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： yambejp
  • 回答日時：

＞document.getElementById("viewspace").innerHTML=text;


のところを、こうする

f.elements["waku"].value=text;

当然、
＞<div id="viewspace"></div>
の個所もいらなくなるので削る
この回答への補足あり
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

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

Q質問する（無料）

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

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

おすすめ情報