[JavaScript]input要素に入力した場所によって対応した場所に出力をする #JavaScript

メモ

開発メモ

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <title>練習</title>
</head>
<body>
    <input name="kanso" id = "num_1" rows="1" cols="10"></input>
    <input name="kanso" id = "num_2" rows="1" cols="10"></input>
    <p id="result_1"></p>
    <p id="result_2"></p>
</body>
<script>
    $("[id^=num_]").change(function () {
        let value = $(this).val(); // 値を取得
        let id = $(this).attr('id'); // id取得
        // idによってresult_{id}に値を入れる
        let res = id.replace(/[^0-9]/g, ''); // idの数字の部分のみを取得
        let result_id = "result_" + res; // 取得した数字でidを生成
        var result = document.getElementById(result_id); // 生成したidの要素を取得
        result.innerHTML = value ? value * 100 : ''; // 取得した要素に値を入れる（入力がない場合は空）
    });
</script>
</html>