ボタンをクリックしたときにform内の入力ボックスの数値を取得したい

前提・実現したいこと

味噌の材料の計算フォームをjavascriptで作っています。
作りたい味噌量を入力して計算ボタンをクリックすると、
その数値を元に各材料が表示される仕様です。

jQueryではできたのですが、javascriptではボタンをクリックしたときに、入力フォーム内の数値を取得することができません。
どうやったらボタンをクリックしたときに入力フォームから数値を取得出来るでしょうか。

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

index.html:44 Uncaught TypeError: Cannot read property 'addEventListener' of null

該当のソースコード

今回はボタンクリックしたときにフォームの数値を取得するところまでです。

javascript
1<!doctype html>
2<html class="no-js" lang="">
3
4<head>
5  <meta charset="utf-8">
6  <title></title>
7  <meta name="description" content="">
8  <meta name="viewport" content="width=device-width, initial-scale=1">
9  
10  <link rel="manifest" href="site.webmanifest">
11  <link rel="apple-touch-icon" href="icon.png">
12  <!-- Place favicon.ico in the root directory -->
13  
14  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
15  
16  <meta name="theme-color" content="#fafafa">
17</head>
18
19<body>
20  
21<div class="container">
22  <div class="row">
23    <div class="col-md-8">
24      <h1>味噌分量計算表</h1>
25      <p>作りたい味噌の量を入力して［計算］ボタンを押してください。</p>
26      <form name="misoform" id="miso_form" action="">
27        <div class="form-group form-inline">
28          <lavel>作りたい味噌量：
29          <input type="text" id="miso_volume" value="" class="form-control col-2" maxlength="3" />
30          Kg</lavel>
31        
32          <input type="button" id="cal_botton" value="計算" class="btn btn-secondary btn-block col-2 form-control">
33        </div>
34      </form>
35
36    </div>
37  
38  </div><!-- /.row -->
39  
40<script>
41  
42  const calBotton = document.getElementById('cal_button');
43
44  calBotton.addEventListener('click', (e) => {
45    let misoVolume = document.getElementById('miso_volume').value;
46  });
47
48  console.log(misoVolume);
49
50</script>
51
52</body>
53
54</html>

試したこと

入力フォームとボタンのIDからそれぞれ変数と定数に入力し、ボタンをクリックしたときの処理を書いてみましたが、エラーログでnullと出ます。

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

回答2件

typoですね。
cal_botton
cal_button

投稿2021/05/22 07:46

編集2021/05/22 07:47

itagagaki

総合スコア8402

tegeken

2021/05/22 09:02

ご指摘ありがとうございます。訂正して動かしてみましたがやはりクリックしたときの入力フォームの値を取得できませんでした。

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

自己解決

html
1<!doctype html>
2<html class="no-js" lang="">
3
4<head>
5  <meta charset="utf-8">
6  <title></title>
7  <meta name="description" content="">
8  <meta name="viewport" content="width=device-width, initial-scale=1">
9  
10  <link rel="manifest" href="site.webmanifest">
11  <link rel="apple-touch-icon" href="icon.png">
12  <!-- Place favicon.ico in the root directory -->
13  
14  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
15  
16  <meta name="theme-color" content="#fafafa">
17</head>
18
19<body>
20  
21<div class="container">
22  <div class="row">
23    <div class="col-md-8">
24      <h1>味噌分量計算表</h1>
25      <p>作りたい味噌の量を入力して［計算］ボタンを押してください。</p>
26        <div class="form-group form-inline">
27          <form name="misoForm" id="miso_form" action="">
28          <lavel>作りたい味噌量：
29          <input type="text" name="misoVolume" id="miso_volume" value="" class="form-control col-2" maxlength="3" />
30          Kg</lavel>
31        
32          <input type="button" name="calButton" id="cal_button" value="計算" onclick="clickBtn();" class="btn btn-secondary btn-block col-2 form-control">
33          </form>
34        </div>
35
36    </div>
37  
38  </div><!-- /.row -->
39  
40<script type="text/javascript" lang="javascript">
41  function clickBtn() {
42    misoVolumes = document.forms.miso_form.miso_volume.value;
43
44  }
45</script>
46
47<!-- <script src="app.js"></script> -->
48</body>
49
50</html>