javascriptが動作しません

Question

###前提・実現したいこと
某サイトで「割り勘電卓」というWEBページの作成・勉強をしています。
途中まではうまく動作していたのですが、以下の状態で動作しなくなりました。
どこかにミスがある様なのですが、自力で見つけることができません。
どうぞ、ご指摘ください。お願いします。
※たぶん「if」以降に間違いがある気がします・・。

###該当のソースコード

<script>
   (function () {
     'use strict';

     var priceForm = document.getElementById('price');
     var numForm = document.getElementById('num');
     var btn = document.getElementById('btn');
     var result = document.getElementById('result');

     priceForm.addEventListener('click', function(){
       this.select();
     });
     numForm.addEventListener('click', function(){
       this.select();
     });

     btn.addEventListener('click' , function() {
       var price = priceForm.value;
       var num = numForm.value;

       if (price.match(/^[1-9][0-9]*$/) && num.match(/^[1-9][0-9]*$/)) {
         //ok
         result.innerHTML = 'OK!';
       } else {
         //error
         result.innerHTML = '入力された値に誤りがあります。';

       }
     });
   })();
 </script>

###試したこと
https://jsfiddle.net/
上記サイトで動作確認。

Comments

[yambejp]

参照先サイトが中途半端で確認できません。teratailだけで完結させるならhtml部分も書いてください

[2017js]

了解しました。ただ、html部分はどこに書けば良いのでしょうか？このコメント欄ですか？

[yambejp]

ごめんなさい、回答のほうに書いちゃいました、一度みてみてください

[kei344]

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、「某サイト」など隠さずURLを掲載されることをお勧めします。

[2017js]

了解しました。今後は気をつけます。また、「某サイト」としたのは、利用規約に「広告・宣伝は不可」とあったのでサイト名を敢えて伏せました・・。

[kei344]

「今後」ではなく、質問文は編集出来ますので、その依頼をしています。サイト名については別に書かなくても良いですが、コード全体がどのように作られているかがわかるほうが重要なので、URLくらいはあるほうが回答がしやすくなると思います。

[toutou]

コンソールログに何かかかれてませんか？

[2017js]

了解しました。質問文の編集、試してみます。ご指摘ありがとうございます。

[2017js]

コンソールログ、初心者なので良く分かりませんが調べてみます。

[kei344]

「コンソールログ」はブラウザに付属するデベロッパーツールで確認できますよ。http://eng-entrance.com/javascript-display-error

[2017js]

ご親切にありがとうございます。後ほど確認してみます！

Answer 1

動きますね
(なんのために無名関数を実行しているかはわかりませんが)

<input type="text" id="price">
<input type="text" id="num">
<input type="button" id="btn">
<div id="result"></div>
<script>
(function () {
  var priceForm = document.getElementById('price');
  var numForm = document.getElementById('num');
  var btn = document.getElementById('btn');
  var result = document.getElementById('result');
  priceForm.addEventListener('click', function(){
    this.select();
  });
  numForm.addEventListener('click', function(){
    this.select();
  });
  btn.addEventListener('click' , function() {
    var price = priceForm.value;
    var num = numForm.value;
    if (price.match(/^[1-9][0-9]*$/) && num.match(/^[1-9][0-9]*$/)) {
      result.innerHTML = 'OK!';
    } else {
      result.innerHTML = '入力された値に誤りがあります。';
    }
  });
})();
</script> 

Comments

[2017js]

早速の回答ありがとうございます。
http://dotinstall.com/lessons/go_dutch_js_v2/33905
上記サイトで勉強中です。
javascriptに問題ないとすると、htmlかcss部分に何かミスがあると思いました。
もう一度、自力で確認してみます。
ありがとうございました！！

Answer 2

やはりhtmlにミスがありました・・。
pタグ内のpとidの間が全角スペースだったのを、半角スペースにしたら正常に動作しました。
お騒がせしました。
回答・コメントをしていただいた皆さま、ありがとうございました！

Answer 3

リンク内容
jsfiddleはセーブするとこのように見せれる

Comments

[2017js]

ありがとうございます！