<h1> width-abhängig als Link

[House, M.D.]

Hallo,
folgendes Problem:

Ich versuche, meine Seite per Javascript dazu zu bringen, ab einer gewissen Fensterbreite eine Überschrift nicht mehr als Link anzuzeigen. Dazu verpasse ich sowohl dem <h1> als auch dem <a> Tag eine ID, welche ich dann über javascript anspreche:

  
<script type="text/javascript">  
  
  
function linkodernicht() {  
	if (window.innerWidth >= 800) {  
	document.getElementById("klein").style.display = 'none';  
	document.getElementById("gross").style.display = 'block';  
	document.getElementById("gross").innerHTML="Ich mag es gar nicht, über 800px Breite ALS LINK angezeigt zu werden!";  
} else {  
	document.getElementById("gross").style.display = 'none';  
	document.getElementById("klein").style.display = 'block';  
	document.getElementById("klein").innerHTML="Ich mag es gar nicht, über 800px Breite ALS LINK angezeigt zu werden!";  
}  
}  
  
window.onresize = linkodernicht;  
  
</script>  

HTML lautet dann klarerweise:

<h1 id="gross"><a href="" id="klein"></a></h1>

Dies funktioniert aber offensichtlich nicht; liegt das an document.getElementById ?

Wie kann ich meinen Code dazu bringen, <h1> width-abhängig entweder als link oder als normale Überschrift anzuzeigen?

Vielen Dank für Aufklärung,
MfG,
House.