htmlで西暦から干支の計算をするプログラムを書きましたが動きません

前提・実現したいこと

初心者です。htmlで干支を計算するプログラムを書きましたが、肝心の計算ができません。

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

Uncaught TypeError: Cannot set property 'textContent' of null
    at calc (練習１.html:27)
    at HTMLButtonElement.onclick (練習１.html:36)

該当のソースコード

javascript
1<!DOCTYPE html>
2<html>
3    <head>
4    <meta charset="UTF-8">
5    <script>
6        
7         function calc(){
8            
9            var y=document.getElementById("year").value;
10            var e= "era"; 
11            var era=y%12;
12            var str="";
13
14                     if(e==0){str="申";}
15                     else if(era==1){str="酉";}
16                     else if(era==2){str="戌";}
17                     else if(era==3){str="亥";}
18                     else if(era==4){str="子";}
19                     else if(era==5){str="丑";}
20                     else if(era==6){str="寅";}
21                     else if(era==7){str="卯";}
22                     else if(era==8){str="辰";}
23                     else if(era==9){str="巳";}
24                     else if(era==10){str="午";}
25                　　　else if(era==11){str="未";}
26
27            document.getElementById("era").textContent=str;
28     }
29    </script>
30    </head>
31    <body>
32        <h2><span id="y"></span>年の干支は<span id="e"></span></h2>
33
34        <p>
35            <input id="year"value="2016"/>
36            <button onclick="calc()">計算</button>
37        </p>
38    </body>
39</html>
40
41