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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

621閲覧

(javascript)ボタンを押す度に、テキストが右に1pxずれる実装

ScripEns

総合スコア15

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/09/10 09:41

編集2018/09/11 00:48

前提・実現したいこと

jsで自分の考えたものを実装できるように練習しています。
ボタンを押す度に、テキストが右に1pxずれる実装をしたいです。

発生している問題・エラーメッセージ

pxの加算がうまくできないので、ぜひアドバイスを頂きたいです。

該当のソースコード

<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>template</title> <style type="text/css"> <!-- #txt_right { position: absolute; left: 0; } --> </style> </head> <body> <header> <div class="header-contents"> </div><!-- /.header-contents --> </header> <div class="main-wrapper"> <section> <button onclick="btnClick();">押すとテキストが右に1pxずれるボタン</button> <p id="txt_right">右に進みます</p> </section> </div><!-- /.main-wrapper --> <footer></footer> </body> <script> var element = document.getElementById('txt_right'); var btnClick = function(){ var left = element.style.left.replace('px', ''); element.style.left = (parseInt(left) + 1) + 'px'; } </script> </html>

試したこと

ここに問題に対して試したことを記載してください。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

guest

回答2

0

ベストアンサー

まず、<html>タグの仕様では、子要素として<head><body>しか許容されていません。
<script>タグを書く場所が誤っています。
<body>内の初期レンダリングが終わってから<script>をロードしたいなら、</body>直前に<script>を配置してください。

(おそらくご存知であろう箇所を打ち消し。)
で、style.leftを適用したいなら、適用したい要素のpositionstatic以外でなければなりません。
positionの初期値はstaticですので、relativeとかfixedとかabsoluteとかに変更しなければ効きません。

~~ので、~~こんな感じにしてみてください。

html

1<header> 2<div class="header-contents"> 3</div><!-- /.header-contents --> 4</header> 5<div class="main-wrapper"> 6<section> 7 <button onclick="btnClick();">押すとテキストが右に1pxずれるボタン</button> 8 <p id="txt_right" style="position: relative;">右に進みます</p> 9</section> 10</div><!-- /.main-wrapper --> 11<footer></footer> 12<script> 13 var element = document.getElementById('txt_right'); 14 var left = 0; 15 16 var btnClick = function() { 17 element.style.left = ++left + 'px'; 18 } 19</script>

<p>タグに直にstyle="position: relative;"を埋め込んでます。
もしposition: fixedにするなら、var left = 0;のところをvar left = elelment.getBoundingClientRect().left;と変更すれば良いです。

投稿2018/09/11 02:18

編集2018/09/11 02:23
spookybird

総合スコア1803

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

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

spookybird

2018/09/11 02:21

あっ。position: absolute書いてありましたね...すみませんすみません... コメントアウトを読み飛ばす癖がorz styleの中をコメントアウトするのって昔そういう文化ありましたね~・・・ すっかり忘れてました。もうそのコメントアウトいらないですよ。 <style>タグに対応してないブラウザなんてもはや使ってる人いないです。
ScripEns

2018/09/11 02:38

ご回答ありがとうございます! 無事実装できたのでベストアンサーにさせていただきます! cssの件はこちらこそすみません。どこかのテンプレートから引っ張ってきたやつだったので、私も特に気にしてなかったです笑 ともあれ、ありがとうございました!
guest

0

element.style.left += '1px';

↑「left」の値は文字列なので、1.文字列の数値化、2.数値化された値の加算、と言った手順を踏まないとうまく動かない。

var btnClick = function(){ var left = element.style.left.replace('px', ''); element.style.left = (parseInt(left) + 1) + 'px'; }

↑のようにすれば期待された動作になるはず。

投稿2018/09/10 10:09

tkturbo

総合スコア5572

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

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

ScripEns

2018/09/11 00:45

回答ありがとうございました! 申し訳ないです。解決策を試させてもらったのですが、うまく機能しなかったです。 var btnClick = function(){ element.style.left += '1px'; } の部分をいただいた内容に差し替えてみた状態で止まっています。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問