Uncaught TypeError: Cannot read properties of nullについて

テキストキッチン

ソーステキスト

\n \n

部分取り出し

\n \n \n

区切り文字で分割

検索

前提

//substrメソッドにある
var v1 = document.getElementById('txt_substr1').valueの所で
Uncaught TypeError: Cannot read properties of null (reading 'value')のエラーメッセージが出ます。

実現したいこと

「部分取り出し」の下のボックスに2つの数値を入力して、[substr]ボタンをクリックすると、ソーステキストから指定範囲のテキストを取り出して表示したいです。

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

Uncaught TypeError: Cannot read properties of null (reading 'value')

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10日で覚えるJavaScript</title>
<style>
#wraper{width: 380px;}
textarea{width: 370px;}
dt{background: lightblue; padding: 4px; margin-top: 8px;}
dd{margin: 2px;}
</style>
<script>
   window.addEventListener('load',
   function(event){
      var elem = document.getElementById('btn_substr');
      elem.addEventListener('click', testSubstr, false);
      elem = document.getElementById('btn_substring');
      elem.addEventListener('click', testSubstring, false);
      elem = document.getElementById('btn_split');
      elem.addEventListener('click', testSplit, false);
      elem = document.getElementById('btn_indexOf');
      elem.addEventListener('click', testIndexOf, false);
    }
   ,false);
   //substrメソッド
   function testSubstr(e){
    var srctxt = document.getElementById('txt_source').value;
    var v1 = document.getElementById('txt_substr1').value
    var v2 = document.getElementById('txt_substr2').value
    var output = document.getElementById('output_substr');
    output.innerHTML += '<p>' + srctxt.substr(v1,v2) + '</p>';
   }
   //substringメソッド
   function testSubstring(e){
   }
   //splitメソッド
   function testSplit(e){
   }
   //indexOfメソッド
   function testIndexOf(e){
   }
</script>
</head>
<body>
   <div id="wrapper">
      <h1>テキストキッチン</h1>
      <dl>
         <dt>ソーステキスト</dt>
         <dd>
         <textarea id="txt_source">翔泳社/10日で覚える/10日で覚えるJavaScript</textarea>
         </dd>
         <dt>部分取り出し</dt>
         <dd><input type="text" id="txt_subsrt1" size="1" value="1">
             <input type="text" id="txt_subsrt2" size="1" value="8">
             <input type="button" id="btn_substr" value="substr">
             <input type="button" id="btn_substring" value="substring"> </dd>
             <dd><div id="output_substr"></div></dd>
        <dt>区切り文字で分割</dt>
        <dd><input type="text" id="txt_split" size="1" value="/">
            <input type="button" id="btn_split" value="split"></dd>
            <dd><div id="output_split"></div></dd>
        <dt>検索</dt>
        <dd><input type="text" id="txt_indexOf" size="8" value="J">
            <input type="button" id="btn_indexOf" value="indexOf"></dd>
            <dd><div id="output_indexOf"></div></dd>
      </dl>
   </div>
</body>
</html>