radioボタンが押されたタイミングでリアルタイムに計算結果が表示される処理を書きたい

前提

textタイプに入力した値とradioボタンに設定した値でリアルタイムに計算する処理を書いています。

実現したいこと

textタイプに入力された数値とradioボタンに設定した値の計算結果を、radioボタンを押した瞬間にリアルタイムで表示される処理を書きたいのですが、方法が分かりません。
例えば、textに入力した「100」という数値に対して、×2の値を設定したradioボタンを押すとリアルタイムで「２００」という計算結果が反映される　といった処理を書きたいです。
計算結果をoutputタグ内に出力することはできたのですが、リアルタイムで画面上に表示されず、ブラウザウィンドウを切り替えると結果が反映される状態です。
初歩的なことで申し訳ありませんが、ご教授いただけますと幸いです。。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <title>自動計算</title>
9</head>
10
11<body>
12
13
14
15    <input type="text" id="input_txt" onkeyup="inputCheck()">
16    <br>
17    <form name="radio_form">
18        <input type="radio" name="btn" value="1" onkeyup="inputCheck();" checked> *1
19        <input type="radio" name="btn" value="2" onkeyup="inputCheck();"> *2
20        <input type="radio" name="btn" value="3" onkeyup="inputCheck();"> *3
21        <input type="radio" name="btn" value="4" onkeyup="inputCheck();"> *4
22
23    </form>
24
25   <output id="out"></output>
26
27    <script>
28
29        function inputCheck() {
30            var num = document.getElementById("input_txt").value;
31            var radioForm = document.forms.radio_form;
32
33            var radioValue = radioForm.btn.value;
34
35            document.getElementById("out").innerHTML = num * radioValue;
36        }
37    </script>
38
39</body>
40
41</html>

試したこと

text入力値*数値での計算結果の出力には成功しました。

html
1
2    <input type="text" id="input_txt" onkeyup="inputCheck()">
3
4    <output id="out"></output>
5
6
7    <script>
8
9        function inputCheck() {
10            var num = document.getElementById("input_txt").value;
11
12            document.getElementById("out").innerHTML = num * 2;
13        }
14    </script>

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

回答1件

ベストアンサー

以下のように修正します。

修正前：

html
1<form name="radio_form">
2  <input type="radio" name="btn" value="1" onkeyup="inputCheck();" checked> *1
3  <input type="radio" name="btn" value="2" onkeyup="inputCheck();"> *2
4  <input type="radio" name="btn" value="3" onkeyup="inputCheck();"> *3
5  <input type="radio" name="btn" value="4" onkeyup="inputCheck();"> *4

修正後：

html
1<form name="radio_form" onchange="inputCheck();">
2  <input type="radio" name="btn" value="1" checked> *1
3  <input type="radio" name="btn" value="2"> *2
4  <input type="radio" name="btn" value="3"> *3
5  <input type="radio" name="btn" value="4"> *4