変数用の 3 つのセクションを含むフォームがあります。最初のセクションは、ユーザーが数値を入力する必要があるテキスト フィールドで、この user_number を呼び出すことができます。次に、ラジオ ボタンのセットです。そのうちの 3 つは、出力の「タイプ」変数を決定します。これを banner_type と呼びます。最後に、別のラジオ ボタンのセットがあります。今回は 16 個です。これらは出力の「スタイル」変数を決定し、banner_style という名前を付けることができます。
スクリプトを実行するために、Generate という名前のボタンがあります。送信ボタンではありません。最後に、出力領域は正しい結果を表示する div です。
このフォームの目的は、ユーザーが特定の種類の画像を選択できるようにすることです。画像の種類とスタイルを変更し、ユーザーごとに異なる情報を出力できるようにするため、3 つの変数が必要になります。
もしそれが役に立てば、Folding@Home sig バナーの選択が簡単になるはずです。コーディングは次のとおりです。
<form>
User Number: <input type="text" id="user_number" /><br /><br />
Team & User Info: <input type="radio" name="banner_type" value="type0" /><br /><br />
Team Info Only: <input type="radio" name="banner_type" value="type1" /><br /><br />
User Info Only: <input type="radio" name="banner_type" value="type2" /><br /><br />
1: <input type="radio" name="banner_style" value="1" /><br /><br />
2: <input type="radio" name="banner_style" value="2" /><br /><br />
3: <input type="radio" name="banner_style" value="3" /><br /><br />
4: <input type="radio" name="banner_style" value="4" /><br /><br />
5: <input type="radio" name="banner_style" value="5" /><br /><br />
6: <input type="radio" name="banner_style" value="6" /><br /><br />
7: <input type="radio" name="banner_style" value="7" /><br /><br />
8: <input type="radio" name="banner_style" value="8" /><br /><br />
9: <input type="radio" name="banner_style" value="9" /><br /><br />
10: <input type="radio" name="banner_style" value="10" /><br /><br />
11: <input type="radio" name="banner_style" value="11" /><br /><br />
12: <input type="radio" name="banner_style" value="12" /><br /><br />
13: <input type="radio" name="banner_style" value="13" /><br /><br />
14: <input type="radio" name="banner_style" value="14" /><br /><br />
15: <input type="radio" name="banner_style" value="15" /><br /><br />
16: <input type="radio" name="banner_style" value="16" /><br /><br />
<input type="button" id="Generate" value="Generate" />
</form>
Image URL: <div id="URL" style=display:inline;></div>
<script type="text/javascript">
document.getElementById('Generate').addEventListener('click',function() {
*SOMETHING NEEDS TO GO HERE*
document.getElementById('URL').innerHTML = 'http://folding.extremeoverclocking.com/sigs/sigimage.php?u=' + user_number + banner_style + banner_type;
});
</script>
したがって、私の最終目標は、スクリプトの最後に示されているように、基本的な画像アドレス、次にユーザーがテキスト フィールドに入力したものの正確なコピーである必要があるユーザー番号、次にバナー スタイルを持つことです。このようなもの：
&c1=000000&c2=000000&c3=000000&c4=000000&c5=000000
これは、banner_style ごとに異なります。各値は、画像自体のさまざまな要素の 16 進カラー コードを表します。最後に、次のようなバナー タイプです。
&bg=0
これは、0、1、または 2 のいずれかになります。
この時点で、私は JavaScript をほとんど使用していないことを明確にする必要があるため、すべてを明確に説明する必要はなく、そこから学ぶこともできます。また、可能であれば、これが純粋な JS であるようにします...そのような jQuery などはありません。