Help: why the conent of P element doesn't show up?

JavaScript
1

I am trying to show the different content of P element based on condition. Here are my code, not sure why the content of P doesn’t show up. Could somebody help?


 <body>
    
    <label for='season selection'>Season Selection</label>
    <select id='season selection'>
     <option value='sum'>summer</option>
     <option value='win'>winter</option>
     <option value=''>--None--</option>
    </select>
    
    <section class="preview">

    </section>

  </body>
  <script>

    const select=document. querySelector('select');
    const section = document.querySelector('section');
    let para = document.createElement('p');
    let response;

    select.onchange=function(){
    const season=select.value;
    if (season==='sum'){response='This season is summer'
     } else if (season==='win'){
      response='This season is winter'
       } else{ response='we don\'t know what season it is'}
    };
    
    para.textContent=response;
    section.appendChild(para);

  </script>
2

Check your <script> tag if it is in the right place.

But most of all check if the following is inside your event handler function.

    para.textContent=response;
    section.appendChild(para);
3

Thank you for the hints :wink: