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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

1570閲覧

ボタンを押したら要素が指定方向に動くようにしたい

nonnon8.

総合スコア19

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/10/26 04:47

編集2018/10/26 06:42

javascriptでボタンを押したら一定方向に要素が一定距離だけ動くように
したいです。今回はtop位置をボタンを押すと上に○px;移動というようにしたいです。

  • top:100~300pxの間で初めは300px;の位置
  • ボタンを押すと+10px;現在の位置より上に上がる
  • top:100px;位置までいくとボタンを押しても上がらないようにalert("stop");

以下とりあえずのコードです。

html

1 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title>game</title> 6<style> 7#ball{ 8 width:50px; 9 height:50px; 10 border-radius:50%; 11 top:300px; 12 left:300px; 13 background-color:black; 14 position:absolute; 15} 16 17</style> 18 19</head> 20 21<body> 22 <div id="ball"></div> 23 24 <input type="button" value="up" id="up" onclick="up()"> 25</body> 26 27<script> 28 function up(){ 29 var ball=document.getElementById("ball"); 30 31 var dis=Math.floor(Math.random()*300); 32 var dis1=10; 33 34 var st=ball.style.top; 35 36 if(st<100){ 37 ball.style.top=-dis; 38 39 40 }else if(st>300){ 41 42 alert("stop"); 43 }else{ 44 45 ball.style.top=dis; 46 } 47 48 }; 49 50</script> 51</html>

とりあえずランダムでtop位置が絶対位置で変わってる・・・というような状態です。
jQueryは使わない方法でお願いします。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/10/26 04:52

インデントはつけるようにしてください。でないとコードも読みづらいですし、閉じ忘れや閉じ位置などに気づきにくくなります。
dice142

2018/10/26 04:59

#ballは必ずcssで扱わなきゃいけませんか?
退会済みユーザー

退会済みユーザー

2018/10/26 05:05

おかしくなったときは、自分のコードを疑ってください。たとえば、上から順に見直すことで解決できますよね?(責めているわけではない)
nonnon8.

2018/10/26 05:18

>>mts10806様 気をつけます
nonnon8.

2018/10/26 05:19

>>dice142様 それ以外のメソッドとかが何を使えばいいのかよくわからないので・・・
nonnon8.

2018/10/26 05:21

>>ppn様 解決できないので、質問してます。何をどう使えばいいかさえよくわからないので
m.ts10806

2018/10/26 06:09

質問は編集できるので適宜ご対応ください
m.ts10806

2018/10/26 08:04

JavaScriptのコードのインデントされてませんが、読みづらくはないのでしょうか。(今回はJavaScriptがメインですよね)
nonnon8.

2018/10/28 23:30

すみません、解決済みの方で修正しておきます。。。
guest

回答3

0

Math.random()使ったらランダムになってしまうのでは?

HTML

1<div id="ball" style="top: 300px;"></div>

JavaScript

1function up(){ 2 var ball = document.getElementById("ball"); 3 var dis = parseFloat(ball.style.top) - 10; 4 if (dis < 100) { 5 alert('stop'); 6 return; 7 } 8 9 ball.style.top = dis.toString() + 'px'; 10}

投稿2018/10/26 04:57

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nonnon8.

2018/10/26 05:27

解答ありがとうございます。 ランダムを入れたのはtop位置を絶対位置で変更はできたけれど、続けて押したときに位置が変わる様子を見たかったので一応いれただけです。現在位置から+10px;ずつとかで動くようにどうすればいいのかわからないので・・・ parseFloatで300px→300と認識されるのですか?(数値として認識?) CSS部分のpxはつけない方がいいのでしょうか。 dis.toString() + 'px';では-10移動した位置を文字列にしているというので合ってますか。 確認したのですがボタンを押しても変化がないみたいです><
x_x

2018/10/26 05:45

Chrome/IE/Firefoxで動作確認済みです。 とくに難しいことはしていないので、どんなブラウザでも動くと思いますが何かエラーが出ているのでしょうか?
nonnon8.

2018/10/26 06:51

ありがとうございます。dice142様の回答みて納得しました。 <div>内部でstyle指定していなかったようです。 確認したらちゃんと動いていました。お手数おかけしました。
guest

0

自己解決

回答いただきありがとうございました。
ボタンを押すことで、上下左右に物体が動くようにできました。
以下コードです。

html

1<html> 2<head> 3 <meta charset="utf-8"> 4 <title>game</title> 5 <style> 6 #ball{ 7 width:50px; 8 height:50px; 9 border-radius:50%; 10 background-color:black; 11 position:absolute; 12 z-index:3; 13 } 14 15 #waku{ 16 width:350px; 17 height:250px; 18 border:1px solid black; 19 top:100px; 20 left:300px; 21 z-index:1; 22 position:absolute; 23 } 24 25 </style> 26 27</head> 28 29<body> 30 31</body> 32 <div id="ball" style="top: 300px; left: 300px;"></div> 33 <div id="waku"></div> 34 35 <input type="button" value="up" id="up" onclick="up()"> 36 <input type="button" value="down" id="up" onclick="down()"> 37 <input type="button" value="right" id="up" onclick="right()"> 38 <input type="button" value="left" id="up" onclick="left()"> 39 40 41<script> 42 43 function up(){ 44 var ball = document.getElementById("ball"); 45 var dis = parseFloat(ball.style.top) - 10; 46 if (dis < 100) { 47 alert('stop'); 48 return; 49 } 50 51 ball.style.top = dis.toString() + 'px'; 52 } 53 54 function down(){ 55 var ball = document.getElementById("ball"); 56 var dis = parseFloat(ball.style.top) + 10; 57 if (dis >300) { 58 alert('stop'); 59 return; 60 } 61 62 ball.style.top = dis.toString() + 'px'; 63 } 64 65 function right(){ 66 var ball = document.getElementById("ball"); 67 var dis = parseFloat(ball.style.left) + 10; 68 if (dis >600) { 69 alert('stop'); 70 return; 71 } 72 73 ball.style.left = dis.toString() + 'px'; 74 } 75 76 function left(){ 77 var ball = document.getElementById("ball"); 78 var dis = parseFloat(ball.style.left) - 10; 79 if (dis <300) { 80 alert('stop'); 81 return; 82 } 83 84 ball.style.left = dis.toString() + 'px'; 85 } 86 87</script> 88</html>

jsでCSSスタイルを変更する際は要素に直接style=""を記入する必要があると
初めて知りました^^;アドバイスありがとうございます。
parseFloatで小数含む数値として値を取得し、
そこから文字列に直してstyleに適用すればいいようです。

ありがとうございました。

投稿2018/10/28 23:35

nonnon8.

総合スコア19

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

コードを拝見し、実行してみましたが、「ボタンを押しても動かない」
ということでよろしいですよね?

#ballのスタイルを全てCSSで行っていますが、
JavaScriptでvar st=ball.style.top;と記述しても
CSSのスタイルは取得できません。

var st=ball.style.top;の記述で取得できるのは
DOMに直接書いたときなので、

HTML

1<div id="ball" style="top: 300px;"></div>

と書いていなければいけません。
また、このときの値は300pxなので、数値としては扱えません。

JavaScript

1ball.style.top.match(/(\d+)px/)[1]

などで数値のみを取得しましょう。

設定の際には逆に

JavaScript

1ball.style.top = [数値] + 'px'

を付ける必要があります。

CSSによる取得・設定は面倒なので回答しませんが、
「javascript css 取得」などで調べると出てくるでしょう。

投稿2018/10/26 05:27

dice142

総合スコア5158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問