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

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

ただいまの
回答率

88.80%

【jQuery】input要素のボタンを押してもmargin-leftの値が変わらない

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 245

itzuakniami123

score 14

前提・実現したいこと

jQueryを使ってボタンを押したらdiv要素を移動させるWebアプリをつくっています。
黒塗りの矢印ボタンを押すと1pxずつ、外側にある矢印ボタンを押すと10pxずつ動かすようにしたいです。

発生している問題・備考

まず、「▶」ボタンを押したら1pxずつ右に動く処理を搭載したくて
自分なりに作成したコードを搭載したものの、動かずに困っています。

普段ならコンソールにエラーメッセージが表示されるはずですが、それも表示されず何が原因かわからない為
こちらに質問させていただきました。

・動かしたいボックスは幅250px × 高さ100px
・body要素からmargin-left:48px; margin-top:27px; がデフォルト位置です。(CSS参照)

・矢印ボタンは画像で作成しています。

実際の画面

イメージ説明

自分の書いたプログラム

jQueryで#boxのmargin-leftの値を取得→クリックイベントで代入していく
1回「▶」ボタンを押したら marign-leftの値が48pxから49pxに
2回「▶」ボタンを押したら margin-leftの値が49pxから50pxに…

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <title>ボックス移動処理</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <link rel="stylesheet" href="style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <div id="box">
        移動するよ
    </div><!-- /#box -->

    <div id="telop">
        <h3>操作画面</h3>
        <div id="arrow_box">
            <div class="flx">
                <input type="image" src="image/more_up.png" id="more_move_up">
            </div><!-- /.flx -->
            <div class="flx">
                <input type="image" src="image/up.png" id="move_up"><br />
            </div><!-- /.flx -->
            <div class="flx">
                <input type="image" src="image/more_left.png" id="more_move_left">
                <input type="image" src="image/left.png" id="move_left">
                <input type="image" src="image/right.png" id="move_right">
                <input type="image" src="image/more_right.png" id="more_move_right"><br />
            </div><!-- /.flx -->
            <div class="flx">
                <input type="image" src="image/down.png" id="move_down">
            </div><!-- /.flx -->
            <div class="flx">
                <input type="image" src="image/more_down.png" id="more_move_down">
            </div><!-- /.flx -->
        </div><!-- /#arrow_box -->
    </div>

<script src="script.js"></script>
</body>
</html>
*{
    padding:0;
    margin: 0;
}
html{
    font-size:62.5%;
    width: 1920px;
    height: 1080px;
}
body{
    font-size:1.6rem;
    width: 1920px;
    height: 1080px;
}
h3{
    padding-left: 10px;
    padding-top: 10px;
}
.flx{
    display: flex;
    flex-wrap: wrap;
    margin-top: 17px;
    margin-bottom:17px;
}
#telop{
    display:block;
    margin:0 auto;
    margin-top:200px;
    background-color: #66CC;
    width: 420px;
}
#box{
    width: 250px;
    height: 100px;
    border: 2.5px solid #369;
    padding: 10px;
    margin-left:48px;
    margin-top:27px;
}
/*矢印ボタン*/
/*上*/
#more_move_up{
    margin:0 auto;
    border-radius:10px;
    cursor:pointer;
    margin-bottom:12px;
    background-color: #EEEEEE;
}
#more_move_up img{
    margin:7px;
    margin-top: 5px;
    margin-bottom:4px;
    width:43px;
    height: 43px;
}
#move_up{
    margin:0 auto;
    border-radius:10px;
    cursor:pointer;
    background-color: #EEEEEE;
}
/*左*/
#more_move_left{
    border-radius:10px;
    cursor:pointer;
    margin:0 auto;

    background-color: #EEEEEE;
}
#more_move_left img{
    margin:7px;
    margin-top: 5px;
    margin-bottom:4px;
    width:43px;
    height: 43px;
}
#move_left{
    margin:0 auto;
    border-radius:10px;
    cursor:pointer;
    margin-right: 40px;
    background-color: #EEEEEE;
}
/*右*/
#more_move_right{
    margin:0 auto;
    border-radius:10px;
    cursor:pointer;
    background-color: #EEEEEE;
}
#more_move_right img{
    margin:7px;
    margin-top: 5px;
    margin-bottom:4px;
    width:43px;
    height: 43px;
}
#move_right{
    margin:0 auto;
    border-radius:10px;
    cursor:pointer;
    margin-left:40px;
    background-color: #EEEEEE;
}
/*下*/
#more_move_down{
    margin:0 auto;
    border-radius:10px;
    cursor:pointer;
    margin-top:12px;
    margin-bottom: 20px;
    background-color: #EEEEEE;
}
#more_move_down img{
    margin:7px;
    margin-top: 5px;
    margin-bottom:4px;
    width:43px;
    height: 43px;
}
#move_down{
    margin:0 auto;
    border-radius:10px;
    cursor:pointer;
    background-color: #EEEEEE;
}
#move_down img{
    height: 48px;
    margin-top: 2px;
}
$(function() {
    let get_margin = $("#box").css("margin-left");
    let num = 1;
    $("#move_right").click(function() {
    //#boxのデフォルトのmargin-leftは48px
    //#move_rightボタンを押したら1px(=num)ずつ増やす
        get_margin += num;
        $("#box").css("margin-left", "get_margin");
    });
});
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

0

少なくとも変数を定義した後使っていません。

// $("#box").css("margin-left", "get_margin");
//                              ↓          ↓
   $("#box").css("margin-left",  get_margin );

あと、margin値は単位(px)まで入っていると思います。数値として処理するならやり方を考えましょう。

【parseInt() - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/parseInt

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/03/23 15:06

    kei344様

    ```JavaScript
    $(function() {
    let get_margin = $("#box").css("margin-left");
    let num = 1;
    $("#move_right").click(function() {
    //#boxのデフォルトのmargin-leftは48px
    //#move_rightボタンを押したら1px(=num)ずつ増やす
    get_margin = parseInt()
    int_get_margin = get_margin + num;
    $("#box").css("margin-left", int_get_margin);
    });
    });
    ```

    上記のやり方でやってみましたが、右に動きませんでした…。
    どのようにしたら一番的確でしょうか?

    キャンセル

  • 2020/03/23 15:21

    > どのようにしたら一番的確でしょうか?
    さっきのリンク先を読んで、例をみるのが良いです。

    とりあえず動くようにしました。
    https://jsfiddle.net/9nxyud05/

    キャンセル

  • 2020/03/23 15:37

    ご丁寧にソースコードまでありがとうございます。
    解決いたしました。

    キャンセル

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

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

関連した質問

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