CODEWITHSUNDEEP
javascriptbrackets
510am
510am

Reputation: 7

Uncaught TypeError: Cannot set property 'className' of null Error on Console

I'm having trouble trying to set up the code. When you type in an artist and press the button, it's supposed to give all their songs

JavaScript file:

/**
* Uses AJAX to query an internet data source for zip codes
* @param {string} zipId The element id that has the zip code
*/
function Music(music) {
// First get the zip code from the HTML textbox
var yourmusic = document.getElementById(music).value;
// Now make a HTTP request
var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function () {
    if (this.readyState === 4) {
        // We got a response from the server!
        if(this.status === 200) {
            // The request was successful!
            displayMusic(this.responseText);
        } else if (this.status === 404){
            // No postal code found
            displayMusic('{ "songs" : "none" }');
        } else {
            console.log("We have a problem: " + this.status);
        }
    } else {
        // Waiting for a response...
    }
};
// Notice how the URL is appended with the zip code
var url = " https://api.mixcloud.com/discover/funk/";
httpRequest.open("GET", url, true);
httpRequest.send();
}
/**
* Displays the zip code place given the JSON data
 * @param {string} data JSON data representing place for given zip 
code
 */
 function displayMusic(data){
 var music = JSON.parse(data);
 if(music.songs === "none") {
    document.getElementById("").className = "alert alert-warning";
    document.getElementById("").innerHTML = "The songs are" + music;
} else {
    document.getElementById("music").className = "alert alert-success";
    document.getElementById("music").innerHTML ="there are no songs for this             artist"
}
}

HTML file:

<!DOCTYPE html>
<html>
 <head>
 <title>Songs</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="ajaxfunctions.js"></script>
</head>
<body>
<div class="container">
  <h2>Songs </h2>
  <br/>
  <p>Try entering an artist to find their songs</p>
  <div>
    <div id="musicbox" class="control-group">
      <label for="songs">artistr</label>
      <input type="text" name="songs" id="songs" placeholder="Type an artist to their songs" />
    </div>
  </div>
  <br />
  <div>
    <button class='btn btn-success btn-large' onclick="Music('songs')">Find Songs</button>
  </div>
  <br />
  <div>
  </div>
</div>

Upvotes: 0

Views: 467

Answers (1)

Bruno Peres
Bruno Peres

Reputation: 16355

The selector document.getElementById("") in these lines

document.getElementById("").className = "alert alert-warning";
document.getElementById("").innerHTML = "The songs are" + music;

will always return null! The first line is causing the error Uncaught TypeError: Cannot set property 'className' of null. Most likely you should not do that. You need remove these two lines and rethink your logic.

Upvotes: 1

Related Questions