BMI計算のコードについて

長いと思うので
必要だと思う部分だけ載せます。
下記のようにコーディングすると、buttonHeightEnabled, buttonWeightEnabledを外で定義しているにも関わらず、どちらもtrueが入るようにしてもbuttonタグのdisable属性が取れません。
原因がわからず苦戦しています。

javascript
1window.addEventListener("DOMContentLoaded", function() {
2		
3		let heightInput = document.getElementById("heightInput");
4		heightInput.addEventListener("input", checkHeightInput);
5		heightInput.addEventListener("blur", checkHeightInput);
6		
7		let weightInput = document.getElementById("weightInput");
8		weightInput.addEventListener("input", checkWeightInput);
9		weightInput.addEventListener("blur", checkWeightInput);
10				
11		let buttonHeightEnabled;
12		let buttonWeightEnabled;
13		
14		let calcBMIButton = document.getElementById("calcBMIButton");
15			if((buttonHeightEnabled === true)&&(buttonWeightEnabled === true)) {
16				calcBMIButton.removeAttribute("disabled");
17			} else {
18				calcBMIButton.setAttribute("disabled", "disabled");
19		}
20		
21		function checkHeightInput() {
22			buttonHeightEnabled = true;
23			
24			let heightStr = heightInput.value;
25			let height = Number(heightStr);
26			let heightInputMsg = document.getElementById("heightInputMsg");
27			if(heightStr.length === 0) {
28				buttonHeightEnabled = false;
29				heightInputMsg.textContent = "身長を入力してください";
30			} else if(!isFinite(height)) {
31				buttonHeightEnabled = false;
32				heightInputMsg.textContent = "身長には数値を入力してください";
33			} else if(height <= 0) {
34				buttonHeightEnabled = false;
35				heightInputMsg.textContent = "身長には正数を入力してください";
36			} else {
37				heightInputMsg.textContent = "";
38			}
39		}
40
41		function checkWeightInput() {
42			buttonWeightEnabled = true;
43			
44			let weightStr = weightInput.value;
45			let weight = Number(weightStr);
46			let weightInputMsg = document.getElementById("weightInputMsg");
47			if(weightStr.length === 0) {
48				buttonWeightEnabled = false;
49				weightInputMsg.textContent = "体重を入力してください";
50			} else if(!isFinite(weight)) {
51				buttonWeightEnabled = false;
52				weightInputMsg.textContent = "体重には数値を入力してください";
53			} else if(weight <= 0) {
54				buttonWeightEnabled = false;
55				weightInputMsg.textContent = "体重には正数を入力してください";
56			} else {
57				weightInputMsg.textContent = "";
58			}
59		}
60			
61	});

html
1	<body>
2		<h1 id="headTitle">BMI計算</h1>
3		<p>
4			身長と体重を入力して計算ボタンを押してください
5		</p>
6		<p>
7			<div>
8				<input type="text" id="heightInput" name="height" placeholder="身長">cm<br>
9				<span id="heightInputMsg" class="redText"></span>
10			</div>
11			<div>
12				<input type="text" id="weightInput" name="weight" placeholder="体重">kg<br>
13				<span id="weightInputMsg" class="redText"></span>
14			</div>
15			<button type="button" id="calcBMIButton" onclick="onCalcBMIButtonClick()" disabled>計算</button>
16		</p>
17		<p id="resultMessage" class="displayNone">
18			あなたのBMI値は<span id="bmiResult" class="redText font16"></span>です。<br>
19			<span id="adviceMessage"></span>
20		</p>
21		<script type="text/javascript" src="BMI.js"></script>
22		<script type="text/javascript" src="calcBMI.js"></script>
23	</body>

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

回答1件

ベストアンサー

下記の部分を関数化して、各チェックの後に実行するようにしないとダメですね。

js
1    if (buttonHeightEnabled === true && buttonWeightEnabled === true) {
2      calcBMIButton.removeAttribute('disabled')
3    } else {
4      calcBMIButton.setAttribute('disabled', 'disabled')
5    }