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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

JavaScript

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

Q&A

解決済

3回答

2611閲覧

javascriptでのvalueを使った計算方法。

meta0804

総合スコア23

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

JavaScript

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

0グッド

0クリップ

投稿2016/06/14 03:28

###前提・実現したいこと
JavaScriptを使用して、見積もり制作プログラムを作りたいと考えています。
valueに値を入力し、計算させようとするもうまくいきません。

どなたか解決方法をご教示ください。
###発生している問題・エラーメッセージ

resultが出力されない。
###JavaScript

<style> body { background: #e0e0e0; font-size: 16px; text-align: center; font-family: Arial, sans-serif; } h1 { font-size: 50px; } #btn { margin: 30px auto; width: 200px; border-radius: 8px; box-shadow: 0 4px 0 #ff6532; background: #ff3f00; color: #fff; cursor: pointer; padding:7px; } #btn:hover { opacity: .8; } #btn.pushed { margin-top: 35px; box-shadow: 0 2px 0 #ff6532; } #result { font-size: 20px; } </style> </head> <body> <h1>費用算出シミュレーション</h1> <p>管理費: ¥60000/月</p> <p>企画費: ¥200000/月</p> <p>撮影日数</p> <select name="satsueinissu"> <option value="0">0日</option> <option value="150000">0.5日</option> <option value="200000">1日</option> <option value="350000">1.5日</option> <option value="400000">2日</option> </select> <p>追加カメラ台数</p> <select name="kamera"> <option name="0">0台</option> <option value="50000">1台</option> <option value="10000">2台</option> </select> <p>編集</p> <select name="edition"> <option value="0">0週間</option> <option value="300000">1週間</option> <option value="500000">2週間</option> </select> <p>ナレーション(プロ)</p> <select name="narepro"> <option value="0">0日</option> <option value="100000">0.5日</option> <option value="150000">1日</option> </select> <p>ナレーション</p> <select name="naremitemo"> <option value="0">0日</option> <option value="70000">0.5日</option> <option value="100000">1日</option> </select> <p id ="btn">計算する</p> <p id="result"></p> <script> (function keisan(){ 'use strict' btn.addEventListener('mousedown', function(){ this.className='pushed'; }); btn.addEventListener('mouseup', function(){ this.className=''; }); btn.addEventListener('click', function(){ var sens = document.getElementById('satsueinissu').value; var camera = document.getElementById('kamera').value; var edit = document.getElementById('edition').value; var narepro = document.getElementById('narepro').value; var naremitemo = document.getElementById('naremitemo').value; var btn = document.getElementById('btn'); var result = document.getElementById('result'); var answer = sens + camera + edit + narepro + naremitemo; result.innerHTML = answer; }); })(); </script> </body> </html>

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

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

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

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

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

guest

回答3

0

<p id ="btn">計算する</p>の箇所ですが=の前にスペースが開いてるのも修正したほうがいいですね

投稿2016/06/14 03:52

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

0

ベストアンサー

document.getElementByIdはID属性からノードを取得するメソッドなので、ID属性を書くようにしてみてください。

投稿2016/06/14 03:37

Lhankor_Mhy

総合スコア35865

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

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

meta0804

2016/06/14 03:54

ありがとうございます。nameではなくidを指定するとresultに表示されるようになりました、しかし、出力結果が数値ではなく文字列で吐き出されます。 度々恐れ入りますが、ご教示頂けると幸いでございます。
meta0804

2016/06/14 04:07

ありがとうございます。
guest

0

getElementById('satsueinissu') と書きながら <select name="satsueinissu"> とnameしか指定されていないから取得できないと思います。

投稿2016/06/14 03:34

kei344

総合スコア69364

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

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

meta0804

2016/06/14 03:54

ありがとうございます。nameではなくidを指定するとresultに表示されるようになりました、しかし、出力結果が数値ではなく文字列で吐き出されます。 度々恐れ入りますが、ご教示頂けると幸いでございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問