How to create a proper click event in js, jquery, html
Question
So as an assignment I need to create a barebones twitter clone. I was given a script that creates random tweets from four users and to display them I'm simply using an interval. My issue is that one of the condition requires that if the user clicks on one of the usernames, the website should show that users tweet history. The tweets are all stored inside the generator file. I have literally been trying for over a day to get a dynamic click script to run. I every time a tweet gets appended to the website it has a class of the users name. The closest I have gotten in terms of logic was to put an onclick=functionName(userclass) inside the anchor of my username. But it is out of scope. I'm pretty new at html/jquery. In fact it is my first week so I have been reading up for hours and you all know how it is when you start learning this stuff. The more you read, the more questions you have. Hope somebody can shine some light
Here's the code:
<!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 answers
solution1
-1 2019-12-01 01:17:47
@Imsuchacoder
Your code shows a poor understanding of HTML DOM and Javascript variable scope. Developers may find your question as "a lot to explain".
(1). You have to get a good understanding of HTML structure. Learn about DOM: https://en.wikipedia.org/wiki/Document_Object_Model and https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
If you don't write it correctly, browser will behave not as you intended.
(2). Your code won't work because gethistory is in a local scope while you're trying to access it from a global scope. Try define function gethistory in global scope.
Learn more about variable scope here: https://www.w3schools.com/js/js_scope.asp and here What is the scope of variables in JavaScript?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.