-PR-
  • 困ってます
  • 質問No.6858845
解決
済み

色をラジオボタンで選択

  • 閲覧数188
  • ありがとう数2
  • 気になる数0
  • 回答数2
  • コメント数0

お礼率 44% (71/161)

エレメントでボタンを押すと色を変えるJavaScriptです。

検索をしながら ボタンで一度変えることはできるようになりましたが

<script type="text/javascript">
function effect() {
var element = document.getElementById("sample");
element.style.color = '#000000';
}
</script>
<button onclick="effect()">チェンジ</button>

<span id="sample">■□□■</span>



ラジオボタンで選択するようにしたいのですが
どのようにすればよいでしょうか?
うまくいく方法を教えてください。

ブラウザーはGoogle Chrome最新版です。
どうしてもできなければ Firefoxでもかまいません。

<script type="text/javascript">
function effect() {
var element = document.getElementById("sample");
element.style.color = '#000000';
}
</script>

<input type=radio name="colorcode" value="#000000" checked>黒
<input type=radio name="colorcode" value="#ff0000">赤
<input type=radio name="colorcode" value="#00ff00">緑

<span id="sample">■□□■</span>
  • 回答数2
  • 気になる数0

質問者が選んだベストアンサー

  • 回答No.2
レベル11

ベストアンサー率 34% (98/288)

<script type="text/javascript">
function effect(color) {
var element = document.getElementById("sample");
element.style.color = color;
}
</script>
お礼コメント
synchro-night

お礼率 44% (71/161)

解答を参考にして 操作できるソースができました。

まだ、JavaScriptの基本がわかっていないので 勉強して 研究してみます。
投稿日時 - 2011-07-09 18:09:43
  • ありがとう数0
-PR-
-PR-

その他の回答 (全1件)

  • 回答No.1
レベル11

ベストアンサー率 34% (98/288)

以下でどうでしょうか。 effectに引数でvalueを渡せるような 修正が必要となります。 <input type=radio name="colorcode" value="#000000" checked onclick="effect(this)">黒 <input type=radio name="colo ...続きを読む
以下でどうでしょうか。
effectに引数でvalueを渡せるような
修正が必要となります。

<input type=radio name="colorcode" value="#000000" checked onclick="effect(this)">黒
<input type=radio name="colorcode" value="#ff0000" onclick="effect(this)">赤
<input type=radio name="colorcode" value="#00ff00" onclick="effect(this)">緑
お礼コメント
synchro-night

お礼率 44% (71/161)

解答ありがとうございます。

>effectに引数でvalueを渡せるような
>修正が必要となります。

どうやってやればよいのでしょうか?
勉強中で わかりません。
申し訳ないです。


サンプルだと id指定できないです

<script language="JavaScript">
<!--eelife
function clr(Color){
clrs = Color;
document.fgColor = clrs;
}
// -->
</script>

<form>
<input type="radio" checked name="ra" onclick="clr('#000000')">:黒&nbsp;
<input type="radio" name="ra" onclick="clr('#ff0000')">:赤&nbsp;
<input type="radio" name="ra" onclick="clr('#0000ff')">:青&nbsp;
<input type="radio" name="ra" onclick="clr('#00ff00')">:緑
</form>

<span id="sample">■□□■</span>
<span>■□□■</span>


このようにidで指定したものを変更したいのです。

<script type="text/javascript">
function effect() {
var element = document.getElementById("sample");
element.style.color = '#ff0000';
}
</script>
<button onclick="effect()">チェンジ</button>

<span id="sample">■□□■</span>
<span>■□□■</span>


なお サンプルは 下記サイトより引用しました。
http://javascriptist.net/ref/element.style.color.html

紹介いただいたサイト(http://eelife.cool.ne.jp/java/botan/rajio_smp.html)の類似サイトは
http://allabout.co.jp/gm/gc/23787/
が ありましたが このままではidで指定できないようです。
投稿日時 - 2011-07-06 23:41:06
  • ありがとう数0
  • 回答数2
  • 気になる数0
このQ&Aで解決しましたか?
-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


-PR-

ピックアップ

-PR-
ページ先頭へ