Как создать правильное событие клика в js, jquery, html - PullRequest
Новая
       9

Как создать правильное событие клика в js, jquery, html

0 голосов
/ 01 декабря 2019

Так что в качестве задания мне нужно создать клон твиттера barebones. Мне дали скрипт, который создает случайные твиты от четырех пользователей, и для их отображения я просто использую интервал. Моя проблема заключается в том, что одно из условий требует, чтобы, если пользователь нажимает на одно из имен пользователей, веб-сайт должен показывать, что пользователи твитят историю. Все твиты хранятся в файле генератора. Я буквально в течение дня пытался запустить скрипт динамического клика. Я каждый раз, когда твит добавляется на сайт, у него есть класс имени пользователя. Самым близким, что я получил с точки зрения логики, было поместить onclick = functionName (userclass) внутри привязки моего имени пользователя. Но это выходит за рамки. Я довольно новичок в html / jquery. На самом деле это моя первая неделя, поэтому я читаю несколько часов, и вы все знаете, как это происходит, когда вы начинаете изучать этот материал. Чем больше вы читаете, тем больше у вас вопросов. Надеюсь, кто-то может пролить свет

Вот код: 

<!DOCTYPE html> <html>   <head>

    <title>TWIDDLER</title>
    <link rel="stylesheet" href="style.css">
    <script src="jquery.js"></script>
    <script src="data_generator.js"></script>
    <script src="history.js"></script>   </head>

  <body>
    <img class="bird" src="icon.png">
    <h1>
      <span class='title' id="top">TWIDDLER (def not Twitter)</span>
    </h1>

    <script>
      $(document).ready(function(){
        var $body = $('.tweets');
        var index = 0;
        setInterval(function(){
          var tweet = streams.home[index];
          var $tweet = $('<div></div>');
          var hypername = tweet.user; 
          var $username = $("<a onclick='gethistory("+hypername+")' href='#top' class='"+hypername+"'><span></span></a>");
          var $endline = $('<br>');
          console.log($username);
          var time = tweet.created_at.toLocaleTimeString();
          $tweet.text(tweet.message + ' | ' + tweet.created_at.toLocaleTimeString());
          $username.text('@' + tweet.user + ': ');
          $username.appendTo($body)
          $tweet.appendTo($body);
          // console.log($tweet);
          // var testname = $('<h6></h6>').text('***'+hypername+'***').appendTo($body);
          $endline.appendTo($body);
          index += 1;
        }, 2000);
         var gethistory = function(name) {
           console.log("I clicked it");
          for (var i = 0; i < streams.users[name].length; i++) {
            var tweethist = streams.users[name][i];
            var $tweethist = $('<div></div>');
            var $endline = $('<br>');
            $tweethist.text(tweet.message + ' | ' + tweet.created_at.toLocaleTimeString());
            $tweethist.appendTo('#history');
            $endline.appendTo('#history');
          }
        };
      });
    </script>

    <h3>
    <section class="row">

        <div class="column1 tweets left"><h2>Tweeds</h2></div>

        <div class="column2 right" id="history"></div>

    </section>
    </h3>

    <!-- <section>
      <audio controls autoplay src="song.mp3"></audio>
    </section> -->

  </body>

</html>

1 Ответ

0 голосов
/ 01 декабря 2019

@ Imsuchacoder

Ваш код плохо понимает область видимости переменных HTML DOM и Javascript. Разработчики могут найти ваш вопрос как «много, чтобы объяснить».

(1). Вы должны хорошо понимать структуру HTML. Узнайте о DOM: https://en.wikipedia.org/wiki/Document_Object_Model и https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction

Если вы не напишите правильно, браузер будет вести себя не так, как вы предполагали.

(2). Ваш код не будет работать, потому что gethistory находится в локальной области, пока вы пытаетесь получить к нему доступ из глобальной области. Попробуйте определить функцию gethistory в глобальной области видимости.

Узнайте больше о области видимости переменных здесь: https://www.w3schools.com/js/js_scope.asp и здесь Какова область видимости переменных в JavaScript?

...