David Washburn David Washburn - 1 year ago 56
HTML Question

Jquery - Reuse Function Multiple Times With One Dynamic Value

NOTE: Here is a working example of the page on my website. Currently it only works for the DayZ section. https://www.brotherhoodgaming.net/reddit.php

Here is my HTML for the click redditHeader

<div class="redditHeader grey3">
<p class="white floatleft">
<i class="material-icons redditHeaderCollapse">

With the help of StackOverflow over the last few months I have built the skeleton of my first website.I have a massive Jquery JSON function that pulls data from reddit based on the URL of the subreddit. I also have 3
's (Dayz, BuildaPCSales and Bronies as a test).

enter image description here

When I click on any of those bars I would like my Javascript function to dynamically load data from
'https://www.reddit.com/r/' + encodeURIComponent(subreddit) + '.json'
- with (subreddit) being the val() text of the
. In this example, if I click on "Dayz" I want the reddit to load data from
without having to manually type the URL into the code.

Here is my javascript function. It currently works, successfully, for any reddit that I manually type the URL for.

$('.redditHeader').click(function() {
var subreddit = $(this).children('.redditBanner').text();

function loadRedditData(subreddit) {
$.getJSON('https://www.reddit.com/r/' + encodeURIComponent(subreddit) + '.json').then(function (data) {
function foo(data) {
// iterate over 10 children, starting at the 0th index
data.data.children.forEach(foo); function foo(item, index) { //SAYS I AM MISSING A ")" HERE
//Load reddit title in correct div//
$('#news' + i + ' .redditTitle').append(
.attr('href', 'https://m.reddit.com/' + post.data.permalink)

//Load reddit Score (net UP - DOWN)//
$('#news' + i + ' .redditScore').prepend(
.attr('class', 'redditUpvoteScore')

//Load reddit post-text in HTML format//
$('#news' + i + ' .redditPost').append(

//Load sub-reddit name in HTML format//
/*$('#news' + i + ' .subRedditName').append(
.attr('class', 'subRedditFormat')
.text('r/' + post.data.subreddit)

//Load post thumbnail URL into an <a> tag wrapping the image//
$('#news' + i + ' .redditThumbnail').append(
.attr('href', post.data.url)
.attr('class', 'thumbURL')

//Load actual thumbnail into the <a> wrapper tag with the thumbURL class//
$('#news' + i + ' .thumbURL').append(
.attr('src', post.data.thumbnail)
.attr('class', "image news hide floatleft")

//Load reddit Username and URL into container DIV//
$('#news' + i + ' .userNameContainer').append(
.attr('class', 'redditUserName')
.attr('href', 'https://m.reddit.com/user/' + post.data.author)

// Convert post creation time to local time//
var utcSeconds = post.data.created_utc;
var d = new Date(0);
// The 0 is the key, which sets the date to the epoch

//Use Moment.js to calculate relative date and append to DIV//
$('#news' + i + ' .redditDate').append(

//Decodes HTML into correct format by replacing unescaped characters//
var $this = $(this);
var t = $this.text();
$this.html(t.replace('&lt','<').replace('&gt', '>'));
$this.html(t.replace('null','').replace('null', ''));

//Checks for "self" tagged images and replaces with placeholder image//
function changeSourceAll() {
var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
if (images[i].src.indexOf('self') !== -1) {
images[i].src = images[i].src.replace("self", "css/images/default.jpg");
for (var i = 0; i < images.length; i++) {
if (images[i].src.indexOf('default') !== -1) {
images[i].src = images[i].src.replace("self", "css/images/default.jpg");
for (var i = 0; i < images.length; i++) {
if (images[i].src.indexOf('https://www.brotherhoodgaming.net/default') !== -1) {
images[i].src = images[i].src.replace("https://www.brotherhoodgaming.net/default", "css/images/default.jpg");

And here was my terrible attempt to pull the value of the text from the
's with class "redditHeader".

$('.redditHeader').each().on('click', function (){

Thanks in advance for any possible help on this. Im stumped!

Answer Source

You can't get .val() of a <p> tag! Use .text()!

$('.redditHeader').click(function() {
  var subreddit = $(this).children('.white').text();

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download