Mal229 Mal229 - 4 months ago 12
jQuery Question

Jquery selector returning a random " in my function call

Hey guys,

I've been running my head into a wall for the past day now, this is a class project and I went outside of the requirements just to play with the google API. My function works, if you pass a string into the searchTube('bob') if will find the first video and pop up a youtube windows. The goal is to have this happen when you click on the cover art, now the issue I'm running into is I want to pass in the title of the song and the artist name. However, I get a random " in my return? Now I believeenter image description here this is due to the spaces, because when I just use the title and pick a title that has spaces the same result... Any idea how I can resolve this issue?

DevTools results

//Do Not Modify the getMusic function
function getMusic() {
var artist = document.getElementById('artist').value;

function drawSongs(songList) {

var container = $('#music-container')
songList.forEach(function (song) {

let myItem = song.title

var card = `
<div class='col-md-6'>
<p class='h4 text-center' href='${song.url}'>${song.title}</p>
<p class='h5 text-center' href='${song.url}'>${song.artist}</p>
<img onclick=searchTube(${song.title} ${song.artist}) class='center-block' src='${song.albumArt}'>
<audio controls class='center-block'>
<source src="${song.preview}" type="audio/mpeg">
Your browser does not support the audio element.

myInfo = ''

Youtube searchTube function

function tplawesome(e, t) { res = e; for (var n = 0; n < t.length; n++) { res = res.replace(/\{\{(.*?)\}\}/g, function (e, r) { return t[n][r] }) } return res }

function searchTube(item) {

// get fourm input
q = item //$('#query').val()

//run request on api
"", {
part: 'snippet',
type: 'video',
q: q,
maxResults: 1,
order: 'viewCount',
key: 'AIzaSyD9YPjBHHTiMX_MpqKySSwIIGlxL1zuD9o'
function (data) {
$.each(data.items, function (index, item) {
$.get('item.html', function (data) {
$('#results').append(tplawesome(data, [{ 'title': item.snippet.title, 'videoid': }]))
//$('#results').append( + ' ' + item.snippet.title + '<br>')
//$('results').append( + ' ' + data.snippet.title + '<br>');

opacity: 0.3,
transition: 'all 0.3s'




You are not correctly escaping the searchTube(${song.title} ${song.artist}) part of your code. Since you want to pass a string as the method parameter, you should signal this parameter as a string. Do this by enclosing your parameters into ''.

You will end up with:

<img onclick="searchTube('${song.title} ${song.artist}')"  class='center-block' src='${song.albumArt}'>