Some output Error in JS

Rahil · December 31, 2022, 10:38am

The script does not give or generate output code, Also a lline comes and visible in the page which prevents the code to generate the output code:

  <!DOCTYPE html>
  <html>
  <head>
    <style>
      /* Add some styles to make the player look nice */
      .radio-player {
        display: flex;
        align-items: center;
        margin: 20px;
       padding: 10px;
       background-color: #eee;
       border-radius: 5px;
     }
     .radio-player select {
       /* Make the dropdown list look nice */
       font-size: 18px;
       padding: 5px 10px;
       border: 1px solid #ccc;
       border-radius: 5px;
       outline: none;
     }
     .radio-player audio {
       /* Make the audio player look nice */
       width: 100%;
       height: 40px;
       margin-left: 10px;
     }
   </style>
  </head>
  <body>
    <h1>Radio Player</h1>
    <form>
      <label for="channel-name">Channel Name:</label><br>
      <input type="text" id="channel-name" name="channel-name"><br>
      <br>
      <label for="channel-url">Channel URL:</label><br>
      <input type="text" id="channel-url" name="channel-url"><br>
      <br>
      <button type="button" onclick="addChannel()">Add Channel</button>
      <br>
      <br>
      <label for="color-picker">Color:</label><br>
      <input type="color" id="color-picker" name="color-picker"><br>
      <br>
      <label for="size-input">Size:</label><br>
      <input type="range" min="50" max="500" value="100" class="slider" id="size-input" name="size-input"><br>
      <br>
      <button type="button" onclick="generateCode()">Generate Code</button>
    </form> 
    <br>
    <select id="channel-select">
    </select>
    <br>
    <br>
    <label for="code">Generated Code:</label><br>
    <textarea id="code" rows="10" cols="50"></textarea>

    <script>
function addChannel() {
  var channelName = document.getElementById("channel-name").value;
  var channelUrl = document.getElementById("channel-url").value;

  var option = document.createElement("option");
  option.value = channelUrl;
  option.text = channelName;

  var select = document.getElementById("channel-select");
  select.appendChild(option);

  var radio = document.getElementById("radio");
  radio.src = channelUrl;
  radio.play();
}
  
function generateCode() {
  var color = document.getElementById("color-picker").value;
  var size = document.getElementById("size-input").value;

  var select = document.getElementById("channel-select");
  var radio = document.getElementById("radio");

  var code = `
  <div class="radio-player">
    <select id="channel-select">
  `;

  for (var i = 0; i < select.options.length; i++) {
    var option = select.options[i];
    var selected = option.value === radio.src ? "selected" : "";
    code += `
    <option value="${option.value}" ${selected}>${option.text}</option>
    `;
  }

  code += `
    </select>
    <audio id="radio" src="${radio.src}" controls style="width: ${size}px; background-color: ${color};"></audio>
  </div>
  
  <script>
    var select = document.getElementById("channel-select");
    var radio = document.getElementById("radio");
    select.addEventListener("change", function() {
      radio.src = this.value;
      radio.play();
    });
  </script>
  `;

  document.getElementById("code").value = code;
}


  </body>
  </html>