質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.80%

画像のimgデータの表示位置が上手く指定できません!

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,949

anopurihana

score 34

こんにちは。
現在Monacaでプロプラン(有料)でアプリ製作をしております。
以下のコードで、テキストボックス内に入力できる文字のカラー変更をできる四つのinputボタンを設置しています。この並びに、<p><a onClick="sound2()">以下省略の画像データを表示したいのですが、うまく反映されません。
具体的には、<p><a onClick="sound2()">以下省略のコードをHTML内の四つのカラーボタンのコードの下に書き込む場合、望んだ位置(カラーボタンの右側)に配置できましたが、そうするとカラーボタンが機能しなくなってしまいました。
この原因と、画像データをカラーボタン右側にうまく配置できる打開策をご教授していただければ助かります。
ご協力よろしくお願いします。

input.green{
          font-size: 1.4em;
          font-weight:bold;
          padding: 10px 30px;
          background-color:#33ff00;
          color:transparent;
          border-style: none;  
          box-shadow: 2px 2px 3px 1px #666;
          -moz-box-shadow: 2px 2px 3px 1px #666;
          -webkit-box-shadow: 2px 2px 3px 1px #666;
          -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
     border-radius: 5px;
          }

input.blue{
          font-size: 1.4em;
          font-weight:bold;
          padding: 10px 30px;
          background-color:#3333ff;
          color:transparent;
          border-style: none;
          box-shadow: 2px 2px 3px 1px #666;
          -moz-box-shadow: 2px 2px 3px 1px #666;
          -webkit-box-shadow: 2px 2px 3px 1px #666;
          }

input.black{
           font-size: 1.4em;
          font-weight:bold;
          padding: 10px 30px;
          background-color:#000000;
          color:transparent;
          border-style: none;
          box-shadow: 2px 2px 3px 1px #666;
          -moz-box-shadow: 2px 2px 3px 1px #666;
          -webkit-box-shadow: 2px 2px 3px 1px #666;
          }

input.red{
           font-size: 1.4em;
          font-weight:bold;
          padding: 10px 30px;
          background-color:#ff0000;
          color:transparent;
          border-style: none;
          box-shadow: 2px 2px 3px 1px #666;
          -moz-box-shadow: 2px 2px 3px 1px #666;
          -webkit-box-shadow: 2px 2px 3px 1px #666;
          }

.unk {
position: relative;
margin-right: 50px;
margin-top: -55px;
text-align: right;
width:auto
height:auto
}
<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>
</a></p>

<form>
<center>
<input type="button" class="green"value="green" onclick="chgColor(this)"style="width:40px;height:40px;">  
<input type="button" class="blue"value="blue" onclick="chgColor(this)"style="width:40px;height:40px;">
<input type="button" class="black"value="black" onclick="chgColor(this)"style="width:40px;height:40px;">    
<input type="button" class="red"value="red" onclick="chgColor(this)"style="width:40px;height:40px;">  
</center>    
</form>

<center>
<div style="padding:0px 30px 30px 20px " "margin:10px 20px 10px 10px">
<textarea rows="3" cols="30" wrap="hard"
          style="width:300px;height:100px;border-style:none;font-size:x-large;text-align:center;"
          placeholder="Input your message!" id="ttttt" onchange="onChange();">
</textarea>  
</div>
</center>
   function sound1() {
            document.getElementById("kokokara").play();
        }
        function sound2(){
            document.getElementById('kokokara2').play();    
        }


function sound1(){

if( typeof( document.getElementById( "kokokara").currentTime) !='undefined'){
    document.getElementById("kokokara").currentTime = 0;
}             
document.getElementById("kokokara").play();
}

function sound2(){

if( typeof(document.getElementById('kokokara2').currentTime) !='undefined'){
    document.getElementById('kokokara2').currentTime = 0;    
}

document.getElementById('kokokara2').play();
}

function chgColor(arg) {
        if (arg.value === "green") {
            document.getElementById("ttttt").style.color = "green";
        } else if (arg.value === "blue") {
            document.getElementById("ttttt").style.color = "blue";
        } else if (arg.value === "black") {
            document.getElementById("ttttt").style.color = "black";
        } else if (arg.value === "red") {
            document.getElementById("ttttt").style.color = "#ff0000";

    }
    }


※質問内容と関連のないコードは一部省略しております。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • s8_chu

    2017/08/26 16:09

    `chgColor関数`、`sound2関数`のコードを追記していただけませんか?

    キャンセル

  • anopurihana

    2017/08/26 16:36

    ご指摘ありがとうございます。たった今コードを追加致しました。

    キャンセル

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.80%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る