js not finding reference

Question

Wondering why my js code isnt referencing the linked .js files I added? I used this on CodePen by linking them through their site, but when I try to add the refrences manually it doesnt seem to work. I tried the suggestions on this page Why does jQuery or a DOM method such as getElementById not find the element? as well but nothing worked. Any thoughts?

<svg viewBox="0 0 70 70">
  <path id="metabolism" d="M0,0v72h72V0H0z M45.38,12.19l-1.21,1.66c-0.16,0.23-0.35,0.26-0.57,0.09c-1.47-1-2.85-1.18-4.13-0.53
    c-1.41,0.75-2.11,2.19-2.11,4.31v9.47h4.62c0.28,0,0.42,0.15,0.42,0.44v2.06c0,0.29-0.14,0.44-0.42,0.44h-4.62v23.85
    c0,0.29-0.14,0.44-0.42,0.44h-2.02c-0.26,0-0.39-0.15-0.39-0.44V30.14H31.8c-0.28,0-0.42-0.15-0.42-0.44v-2.06
    c0-0.29,0.14-0.44,0.42-0.44h2.72v-9.47c0-1.58,0.32-2.98,0.97-4.19c0.64-1.23,1.55-2.15,2.72-2.75c1.09-0.56,2.25-0.77,3.5-0.63
    c1.25,0.12,2.44,0.59,3.59,1.41C45.53,11.73,45.56,11.94,45.38,12.19z"/>
  
  
  <path id="technique" class="hide" d="M0,0v72h72V0H0z M40.05,36.57c0,0.22-0.11,0.33-0.33,0.33h-8.62c-0.22,0-0.33-0.11-0.33-0.33V35
    c0-0.2,0.11-0.3,0.33-0.3h8.62c0.22,0,0.33,0.1,0.33,0.3V36.57z"/>
  <path id="digital" class="hide" d="M0,0v72h72V0H0z M45.89,36.15c0,0.19-0.09,0.29-0.28,0.3l-16.83,1.48c0.47,1.7,1.41,3.1,2.81,4.2
        c1.44,1.11,3.06,1.66,4.88,1.66c1.38,0,2.66-0.34,3.87-1.01c1.19-0.66,2.15-1.56,2.88-2.72c0.11-0.19,0.26-0.23,0.45-0.12
        l1.36,0.77c0.19,0.12,0.23,0.28,0.12,0.47c-0.94,1.48-2.18,2.66-3.73,3.52c-1.53,0.86-3.18,1.29-4.95,1.29
        c-2.81,0-5.21-0.99-7.2-2.98c-2-2-3-4.41-3-7.22c0-2.86,0.96-5.27,2.88-7.24c1.91-1.97,4.24-2.95,7.01-2.93
        c2.69,0.02,4.98,1.01,6.89,2.98c1.89,1.95,2.84,4.3,2.84,7.03V36.15z"/>
</svg>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js?r=147"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/findShapeIndex.js"></script>

<script type="text/javascript">
var menu = new TimelineMax({repeat:-1});
menu.to("#metabolism", 1, {morphSVG:"#technique", delay:1, ease:Quart.easeInOut});
menu.to("#metabolism", 1, {morphSVG:"#digital", delay:1, ease:Quart.easeInOut});
menu.to("#metabolism", 1, {morphSVG:"#metabolism", delay:1, ease:Quart.easeInOut});
</script>


<style>
.hide{ display:none }
svg{ 
}
</style>

So what exactly have you tried from the question you've linked to? It should be pretty straightforward just re-ordering the scripts. — Guy Incognito, Jan 01 '21 at 22:42

score 0 · Accepted Answer · answered Jan 01 '21 at 22:43

It looks like your script that references the #metabolism element is placed before that element is actually created. Simply re-order the scripts so that all scripts are placed at the end of the HTML, after all the relevant elements have been created.

The code would now look like this:

<head>
</head>
<body>
<svg viewBox="0 0 70 70">
  <path id="metabolism" d="M0,0v72h72V0H0z M45.38,12.19l-1.21,1.66c-0.16,0.23-0.35,0.26-0.57,0.09c-1.47-1-2.85-1.18-4.13-0.53
    c-1.41,0.75-2.11,2.19-2.11,4.31v9.47h4.62c0.28,0,0.42,0.15,0.42,0.44v2.06c0,0.29-0.14,0.44-0.42,0.44h-4.62v23.85
    c0,0.29-0.14,0.44-0.42,0.44h-2.02c-0.26,0-0.39-0.15-0.39-0.44V30.14H31.8c-0.28,0-0.42-0.15-0.42-0.44v-2.06
    c0-0.29,0.14-0.44,0.42-0.44h2.72v-9.47c0-1.58,0.32-2.98,0.97-4.19c0.64-1.23,1.55-2.15,2.72-2.75c1.09-0.56,2.25-0.77,3.5-0.63
    c1.25,0.12,2.44,0.59,3.59,1.41C45.53,11.73,45.56,11.94,45.38,12.19z"/>
  
  
  <path id="technique" class="hide" d="M0,0v72h72V0H0z M40.05,36.57c0,0.22-0.11,0.33-0.33,0.33h-8.62c-0.22,0-0.33-0.11-0.33-0.33V35
    c0-0.2,0.11-0.3,0.33-0.3h8.62c0.22,0,0.33,0.1,0.33,0.3V36.57z"/>
  <path id="digital" class="hide" d="M0,0v72h72V0H0z M45.89,36.15c0,0.19-0.09,0.29-0.28,0.3l-16.83,1.48c0.47,1.7,1.41,3.1,2.81,4.2
        c1.44,1.11,3.06,1.66,4.88,1.66c1.38,0,2.66-0.34,3.87-1.01c1.19-0.66,2.15-1.56,2.88-2.72c0.11-0.19,0.26-0.23,0.45-0.12
        l1.36,0.77c0.19,0.12,0.23,0.28,0.12,0.47c-0.94,1.48-2.18,2.66-3.73,3.52c-1.53,0.86-3.18,1.29-4.95,1.29
        c-2.81,0-5.21-0.99-7.2-2.98c-2-2-3-4.41-3-7.22c0-2.86,0.96-5.27,2.88-7.24c1.91-1.97,4.24-2.95,7.01-2.93
        c2.69,0.02,4.98,1.01,6.89,2.98c1.89,1.95,2.84,4.3,2.84,7.03V36.15z"/>
</svg>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js?r=147"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="hhttps://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/findShapeIndex.js"></script>

<script type="text/javascript">
var menu = new TimelineMax({repeat:-1});
menu.to("#metabolism", 1, {morphSVG:"#technique", delay:1, ease:Quart.easeInOut});
menu.to("#metabolism", 1, {morphSVG:"#digital", delay:1, ease:Quart.easeInOut});
menu.to("#metabolism", 1, {morphSVG:"#metabolism", delay:1, ease:Quart.easeInOut});
</script>
</body>

— Gabriel

js not finding reference

1 Answers1