-2

i'm trying to call a javascript function from a tag , but for some reasons i can't get it work i don't get an alert at all, if i delete the call of function goToprofile i get the json readin right , does the place of the function affects if he can read it ?
my html page : 

<!DOCTYPE html>
<html>
<head>
<script>
function load() {
$.getJSON("jsons/followers.json", function(json) {
followers = json;

for(var k in followers.followers){
  if(k=='Admin')
    {
      for(var j in followers.followers[k]){
        $('#contentFollow').append('<li><a href="#" 
         id="'+followers.followers[k][j]+'" 
        onclick="goToprofile('+followers.followers[k][j]')">' 
        +followers.followers[k][j]+'<br>'+'</a></li>');
         $('#contentFollow').append("<br>___________<br>");
        }
}
 }
   });
  }
  function goToprofile(Theuser)
   {
    alert(Theuser)
   }
<script> 
</head> 
<body onload="load()">
 <ul>
      <li  id="dropdownFollowing" style="position:absolute;left:530px;Top:0;">
        <a   class="dropbtn" ><img src="images/user.png"></a>
        <div class="dropdown-content" id="contentFollow">
        </div>
      </li>
</body>

my json file : 

{
"followers": {
    "Admin": ["ilan shemon","lian jack","lele robit"]
}
}

without calling goToprofile function i get this html ,but adding the call of the function it doesn't show anything:
enter image description here

reeena11
  • 95
  • 1
  • 11

2 Answers2

2

Look at the HTML you are generating:

<li><a href="#" id="'ilan shemon" onclick="goToprofile(ilan shemon)">

JavaScript strings need to be quoted.

That said, generating code by mashing strings together is hard and error prone. Don't do it. Build up a DOM instead. Use DOM methods (or jQuery abstractions of them) to escape things properly.

for (var j in followers.followers[k]) {
    let profile = followers.followers[k][j];
    let $li = $("<li />");
    let $button = $("<button />")  // You aren't linking anywhere. Don't use a link.
        .attr("type", "button")
        .attr("id", profile)
        .on("click", function () { 
            goToProfile(profile);
        })
        .text(profile);
    $li.append($button);
    $('#contentFollow').append($li);
}

NB: There is no place in HTML where an <li> and <br> can be sibblings. If you want a border between elements, use a CSS border. If you want space between the content of an element and the edge of that element, use a CSS padding.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • 3
    @AlainIb — Adding the quotes to my demonstration of the quotes being missing was a very unhelpful edit! – Quentin Jan 08 '18 at 21:13
  • [Working example](https://jsfiddle.net/o1qtgyeq/). Also, IDs should not contain spaces. See [What are valid values for the id attribute in HTML?](https://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html) – showdev Jan 08 '18 at 22:00
1

There are a bunch of syntax errors in this file and each one individually will break your page. Because they are numerous and all pretty small it's easier to just show you a comparison and discuss the major ones. 

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
      var followers = {
        "followers": {
            "Admin": ["ilan shemon","lian jack"]
        }
      }
    </script>
    <script>
      function load() {
       // $.getJSON("jsons/followers.json", function(json) {
          //followers = json;

          for(var k in followers.followers) {
            if(k=='Admin') {
                for(var j in followers.followers[k]){
                  let profile = followers.followers[k][j];
                  let $li = $("<li />");
                  let $button = $("<button />")
                      .attr("type", "button")
                      .attr("id", profile)
                      .on("click", function () { 
                          goToProfile(profile);
                      })
                      .text(profile);
                  $li.append($button);
                  $('#contentFollow').append($li);
                }                
              }
          }
        //});
      } 
      function goToProfile(Theuser) {
          alert(Theuser)
      }
    </script>
  </head> 
  <body onload="load()">
   <ul>
        <li  id="dropdownFollowing" style="position:absolute;left:530px;Top:0;">
          <a   class="dropbtn" ><img src="images/user.png"></a>
          <div class="dropdown-content" id="contentFollow">
          </div>
        </li>
    </ul>  
  </body> 
</html>
  1. You need to close all HTML tags properly. For example your <script> tag needs to be closed with </script>. This is a problem with the <html> and <ul> tags in your file as well.
  2. You need to include jQuery somewhere in order to access its functions. You can tell a jQuery function apart from standard javascript functions if they start with $
  3. The formatting of your html strings in the load() function are incorrect as @Quentin pointed out so I included his fix in my code snippet.
  4. The function names you are calling have typos in them. As @user78403 pointed out onload=loadings() should be replaced with onload=load() and function goToprofile(Theuser) should be replaced with function goToProfile(Theuser)

There might be additional minor syntax errors in the file but this should give you a good start. I would recommend downloading an IDE if you haven't already which will have some helpful tools for identifying syntax errors in your code. A good one to start with is Sublime Text. I would also recommend starting with a very simple HTML file and then successively building on it once you know it runs. Using your file as an example, it would have been better to start with an empty <body onload="load()"></body> and a simple load function like function load() { alert('hi!'); }

Hope this helps

user3298727
  • 11
  • 2