こんにちは。
現在Monacaでプロプラン(有料)でアプリ製作をしております。
以下のコードで、テキストボックス内に入力できる文字のカラー変更をできる四つのinputボタンを設置しています。この並びに、<p><a onClick="sound2()">以下省略の画像データを表示したいのですが、うまく反映されません。
具体的には、<p><a onClick="sound2()">以下省略のコードをHTML内の四つのカラーボタンのコードの下に書き込む場合、望んだ位置(カラーボタンの右側)に配置できましたが、そうするとカラーボタンが機能しなくなってしまいました。
この原因と、画像データをカラーボタン右側にうまく配置できる打開策をご教授していただければ助かります。
ご協力よろしくお願いします。
css
1input.green{ 2 font-size: 1.4em; 3 font-weight:bold; 4 padding: 10px 30px; 5 background-color:#33ff00; 6 color:transparent; 7 border-style: none; 8 box-shadow: 2px 2px 3px 1px #666; 9 -moz-box-shadow: 2px 2px 3px 1px #666; 10 -webkit-box-shadow: 2px 2px 3px 1px #666; 11 -moz-border-radius: 5px; 12 -webkit-border-radius: 5px; 13 border-radius: 5px; 14 } 15 16input.blue{ 17 font-size: 1.4em; 18 font-weight:bold; 19 padding: 10px 30px; 20 background-color:#3333ff; 21 color:transparent; 22 border-style: none; 23 box-shadow: 2px 2px 3px 1px #666; 24 -moz-box-shadow: 2px 2px 3px 1px #666; 25 -webkit-box-shadow: 2px 2px 3px 1px #666; 26 } 27 28input.black{ 29 font-size: 1.4em; 30 font-weight:bold; 31 padding: 10px 30px; 32 background-color:#000000; 33 color:transparent; 34 border-style: none; 35 box-shadow: 2px 2px 3px 1px #666; 36 -moz-box-shadow: 2px 2px 3px 1px #666; 37 -webkit-box-shadow: 2px 2px 3px 1px #666; 38 } 39 40input.red{ 41 font-size: 1.4em; 42 font-weight:bold; 43 padding: 10px 30px; 44 background-color:#ff0000; 45 color:transparent; 46 border-style: none; 47 box-shadow: 2px 2px 3px 1px #666; 48 -moz-box-shadow: 2px 2px 3px 1px #666; 49 -webkit-box-shadow: 2px 2px 3px 1px #666; 50 } 51 52.unk { 53position: relative; 54margin-right: 50px; 55margin-top: -55px; 56text-align: right; 57width:auto 58height:auto 59}
html
1<p><a onClick="sound2()"><div class="unk"><img src="pic/han.jpg" width="40" height="40" data-width="39" data-height="39" oncontextmenu="return false" data-src="pic/han.jpg" data-aspect="0.748"/> </div> 2</a></p> 3 4<form> 5<center> 6<input type="button" class="green"value="green" onclick="chgColor(this)"style="width:40px;height:40px;"> 7<input type="button" class="blue"value="blue" onclick="chgColor(this)"style="width:40px;height:40px;"> 8<input type="button" class="black"value="black" onclick="chgColor(this)"style="width:40px;height:40px;"> 9<input type="button" class="red"value="red" onclick="chgColor(this)"style="width:40px;height:40px;"> 10</center> 11</form> 12 13<center> 14<div style="padding:0px 30px 30px 20px " "margin:10px 20px 10px 10px"> 15<textarea rows="3" cols="30" wrap="hard" 16 style="width:300px;height:100px;border-style:none;font-size:x-large;text-align:center;" 17 placeholder="Input your message!" id="ttttt" onchange="onChange();"> 18</textarea> 19</div> 20</center> 21
javascript
1 function sound1() { 2 document.getElementById("kokokara").play(); 3 } 4 function sound2(){ 5 document.getElementById('kokokara2').play(); 6 } 7 8 9function sound1(){ 10 11if( typeof( document.getElementById( "kokokara").currentTime) !='undefined'){ 12 document.getElementById("kokokara").currentTime = 0; 13} 14document.getElementById("kokokara").play(); 15} 16 17function sound2(){ 18 19if( typeof(document.getElementById('kokokara2').currentTime) !='undefined'){ 20 document.getElementById('kokokara2').currentTime = 0; 21} 22 23document.getElementById('kokokara2').play(); 24} 25 26function chgColor(arg) { 27 if (arg.value === "green") { 28 document.getElementById("ttttt").style.color = "green"; 29 } else if (arg.value === "blue") { 30 document.getElementById("ttttt").style.color = "blue"; 31 } else if (arg.value === "black") { 32 document.getElementById("ttttt").style.color = "black"; 33 } else if (arg.value === "red") { 34 document.getElementById("ttttt").style.color = "#ff0000"; 35 36 } 37 }
※質問内容と関連のないコードは一部省略しております。
あなたの回答
tips
プレビュー