Javascriptの積の計算結果が出て来ません

Javascriptで２つの数値を入力し，「計算」ボタンをクリックすると，『計算結果：』の横に２つの数値をかけた数値が表示されるようなプログラムを作りたいのですがこのプログラムのどこが原因なのか見つけることができませんでした。
こちらがHTMLです

			</p>
			<p class="q-body">
				<input id="q2-1" type="text" size="4"></input>
				 ×
				<input id="q2-2" type="text" size="4"></input>
				<button id="q2btn">計算</button><br>
				計算結果：<span id="q2"></span>
			</p>

こちらがJavascriptです。



var num1 = document.getElementByid('q2-1');
var num2 = document.getElementByid('q2-2');
var btn2 = document.getElementByid('q2btn');
var elm2 = document.getElementByid('q2');

btn2.onclick = click2;

function click2(){
  var num1 = parseFloat(document.getElementById('q2-1').value);
  var num2 = parseFloat(document.getElementById('q2-2').value);
  var elm2 = num1*num2;
  elm2.textContent = ’document.getElementByid('q2').value’;
  console.log(elm2);

こちらの下から２行目「 ’elm2.textContent = document.getElementByid('q2').value’;」
が「invalid or unexpected token」と出てしまい考えてみたのですが何が原因で動かないのか分からない状態にあります。よろしくお願いします。

date

2017/11/07 02:32

まだ計算結果が出ていないのだからベストアンサーを付けるのはまだ早いのでは

行動規範の内容に同意します

回答3件

ベストアンサー

’が両方全角です。

追記：

とりあえずこう書けば動きます。

JavaScript
1document.getElementById('q2btn').onclick = function () {
2  var num1 = parseFloat(document.getElementById('q2-1').value);
3  var num2 = parseFloat(document.getElementById('q2-2').value);
4  document.getElementById('q2').textContent = num1*num2;
5};
6```**動くサンプル：**[https://jsfiddle.net/dyzfs4d6/](https://jsfiddle.net/dyzfs4d6/)
7
8---
9
10input要素には終了タグが不要です。
11
12【input 要素 - HTML | MDN】
13[https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input](https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input)

投稿2017/11/07 02:09

編集2017/11/07 02:43

kei344

総合スコア69398

blacky

2017/11/07 02:14

ありがとうございます。直した結果同じ行の('q2').valueがUnexpected identifierと出てしまいました。教えていただけると幸いです。

kei344

2017/11/07 02:23

多分そこではないと思います。「elm2」という変数名を同じコード中に2回定義していることが問題。入れようとしている「elm2」には数値が入っています。あと、「'document.getElementByid('q2').value'」という文字列を代入していますが、計算結果を入れるのでは？

kei344

2017/11/07 02:34

マイナスを押された方は、とりあず問題があるなら指摘だけでもコメントしてください。

think49

2017/11/07 03:43

しばらく考えましたが、マイナスを押すほどの問題(要件を達成出来ないレベルの不具合)が見つからなかった事をコメントしておきます。

行動規範の内容に同意します

ところどころ
document.getElementByid
とByIdとするところがByidになってます

投稿2017/11/07 02:31

date

総合スコア1820

<!DOCTYPE html> <html> <body> <p id="demo"> </p> <script> function myFunction() { alert("test") x=document.getElementById("q2"); var num1 = parseFloat(document.getElementById('q2-1').value); alert(num1) var num2 = parseFloat(document.getElementById('q2-2').value); alert(num2) var elm2 = num1*num2; alert(elm2) //elm2.textContent = ’document.getElementByid('q2').value’; //console.log(elm2); x.innerHTML=elm2; } </script> <p class="q-body"> <input id="q2-1" type="text" size="4"></input> × <input id="q2-2" type="text" size="4"></input> <button id="q2btn" onclick="myFunction()">計算</button><br> 計算結果：<span id="q2"></span> </p> </body> </html>

投稿2017/11/07 02:27