根据其数据属性选择单击的元素

Question

I'm working on a personal trainer website that lets you choose the time of your training session. There are 6 times available: 5 mins, 10 mins, 15 mins, and so on. This is what I have so far.

I want to highlight the time that you've chosen. I've only tried to implement this for the top row of times, and when you click a time to highlight it the other ones don't get unhighlighted, but that is not why I'm asking this question. My problem is that when you click on a time, nothing happens. I've tried looking in the console and this is the error it throws:

What's wrong with my code?

 $("body").append( "<p class='text' id='CYTText'>Choose your session's time:</p>" ); setUpCYT(350, 200, 0.8, 0.85); function setUpCYT(littleXOffset, littleYOffset, littleScale, littleOpacity) { for (i = 1; i < 4; i++) { var timeSelectorElement = "[data='" + i + "']"; var timeSelectorName = "timeSelector"+i; $("body").append( "<p class='text' id='CYTTimerText' data='" + i + "' onclick='selectTime(" + timeSelectorElement + ")'>00:00</p>" ); $("[data='" + i + "']").css({"left":littleXOffset * (i-2), "-webkit-transform":"scale(" + littleScale + ")", "opacity":littleOpacity}); timeSelectorName = new Timer(timeSelectorElement); timeSelectorName.set(i*5,0); } for (i = 1; i < 4; i++) { $("body").append( "<p class='text' id='CYTTimerText' data='" + i+3 + "'>00:00</p>" ); $("[data='" + i+3 + "']").css({"top":littleYOffset, "left":littleXOffset * (i-2), "-webkit-transform":"scale(" + littleScale + ")", "opacity":littleOpacity}); var timeSelectorElement = "[data='" + i+3 + "']"; var timeSelectorName = "timeSelector"+i+3; timeSelectorName = new Timer(timeSelectorElement); timeSelectorName.set((i+3)*5,0); } //select the middle selectTime("[data='2']"); } function selectTime(data) { TweenLite.to($(data), 0.5, { "-webkit-transform":"scale(1)", "opacity":1 }); } //timer function function Timer (element) { var minutes, seconds, finalTimeInSeconds, displayMinutes, displaySeconds, interval = 1000, self = this, timeLeftToNextSecond = 1000, running = false; this.set = function(inputMinutes, inputSeconds) { finalTimeInSeconds = inputMinutes * 60 + inputSeconds; minutes = (Math.floor(finalTimeInSeconds / 60)); seconds = finalTimeInSeconds % 60; this.print(); } this.add = function(inputMinutes, inputSeconds) { finalTimeInSeconds += inputMinutes * 60 + inputSeconds; finalTimeInSeconds = (finalTimeInSeconds < 0) ? 0 : finalTimeInSeconds; minutes = (Math.floor(finalTimeInSeconds / 60)); seconds = finalTimeInSeconds % 60; this.print(); } this.subtract = function(inputMinutes, inputSeconds) { finalTimeInSeconds -= inputMinutes * 60 + inputSeconds; if(finalTimeInSeconds < 0) {nextTask()} finalTimeInSeconds = (finalTimeInSeconds < 0) ? 0 : finalTimeInSeconds; minutes = (Math.floor(finalTimeInSeconds / 60)); seconds = finalTimeInSeconds % 60; this.print(); } this.reset = function() { this.set(0,0); } this.print = function() { displayMinutes = (minutes.toString().length == 1) ? "0" + minutes : minutes; //ternary operator: adds a zero to the beggining displaySeconds = (seconds.toString().length == 1) ? "0" + seconds : seconds; //of the number if it has only one caracter. $(element).text(displayMinutes + ":" + displaySeconds); } this.run = function() { if (running == false) { running = true; var _f = function() { secondStarted = new Date; self.subtract(0, 1); interval = 1000; var theColorIs = $(element).css("color"); ac = setTimeout(_f,interval); } ac = setTimeout(_f, interval); } } this.stop = function() { if (running == true) { running = false; stopped = new Date; interval = 1000 - (stopped - secondStarted); clearTimeout(ac); } } } 

 body{ background-color: #02BFC1; overflow:hidden; margin: 0; } @font-face { font-family: 'Bebas Neue'; font-style: normal; font-weight: normal; src: local('Bebas Neue'), url('BebasNeue.woff') format('woff'); } .text { color: #F1F2F0; font-family:Bebas Neue; -webkit-user-select: none; cursor: default; text-shadow: 3px 3px 2px rgba(0,0,0,0.2); } #CYTText { text-align:center; height: 100px; position: absolute; margin: auto; top: 0; bottom: 290px; right: 0; left: 0; font-size:50px; } #CYTTimerText { text-align:center; height: 100px; position: absolute; margin: auto; top: 0; bottom: 150px; right: 0; left: 0; font-size:95px; } 

Answer 1

There are a couple of simple issues. first off the string isn't being parsed correctly that is setting up the onclick

1. Closing quotes

It should look like this: onclick="selectTime("[data='2']")" But it looks like this: onclick="selectTime([data=" 2'])'

2. Reference Error

There is also a scoping /reference error for the function selectTime the click is trying to call

Here is the full working example: http://jsfiddle.net/qLnLmgy6/2/

Hope that helps!

Answer 2

The syntax error is caused by the string that you're passing to append() :

$("body").append(
        "<p class='text' id='CYTTimerText' data='" + i +
        "' onclick='selectTime(" + timeSelectorElement + ")'>00:00</p>"
);

Let's print an instance of this string and examine it:

<p class='text' id='CYTTimerText' data='1' onclick='selectTime([data='1'])'>00:00</p>

Observe that the onclick handler is a code fragment delimited by single quotes:

onclick='selectTime([data='

We can fix this by replacing the single quotes with escaped double quotes:

$("body").append(
        "<p class='text' id='CYTTimerText' data='" + i +
        "' onclick=\"selectTime(" + timeSelectorElement + ")\">00:00</p>"
);

However, now we have another problem. An instance of the string looks like this:

<p class='text' id='CYTTimerText' data='1' onclick="selectTime([data='1'])">00:00</p>

The code for onclick is selectTime([data='1']) , which is syntactically incorrect. The intention is to pass the string "[data='1']" to selectTime .

The inline HTML already uses double quotes to delimit the onclick value. How do we put double quotes inside this value? We have to use " for each double quote:

$("body").append(
        "<p class='text' id='CYTTimerText' data='" + i + "' onclick=\"selectTime(&quot;" + timeSelectorElement + "&quot;)\">00:00</p>"
);

Now an instance of the string looks like this:

<p class='text' id='CYTTimerText' data='1' onclick="selectTime(&quot;[data='1']&quot;)">00:00</p>

That looks strange, but it will be correct once it has been inserted into the document.

After making that change, the code sort of works. It's still not right because you have layout problems, but at least you can click on the 15:00 time and see that the onclick handler calls selectTime correctly.

By the way, there are better approaches than building that complicated string. You can simplify the inline handler to onclick="selectTime(this)" , where this will have the value of the object that was clicked. An even better way to go about it would be to avoid inline handler definitions. Instead, build a paragraph object and make a new function that you assign as a click handler.

Regardless of how you implement the onclick handler, you're left with the problem of overlapping timer elements. Your timers are paragraphs that you've absolutely positioned next to one another. The paragraphs stretch as wide as possible. Thus, the first timer is obscured by subsequent timers.

You can get rid of the overlap by displaying the timers as inline-block elements. To restrict the width of the layout, put everything into a wrapper div . The following snippet demonstrates this approach.

 window.onload = function () { $('#wrapTimers').append( "<p class='text' id='CYTText'>Choose your session duration:</p>" ); setUpCYT(350, 200, 0.8, 0.85); }; function setUpCYT(littleXOffset, littleYOffset, littleScale, littleOpacity) { for (i = 1; i < 4; i++) { var timeSelectorElement = "[data='" + i + "']"; var timeSelectorName = "timeSelector"+i; var s = "<p class='text timerContainer' data='" + i + "' onclick=\\"selectTime(this)\\">00:00</p>"; //"' onclick=\\"selectTime(&quot;" + timeSelectorElement + "&quot;)\\">00:00</p>"; $('#wrapTimers').append(s); $("[data='" + i + "']").css({"left":littleXOffset * (i-2), "-webkit-transform":"scale(" + littleScale + ")", "opacity":littleOpacity}); timeSelectorName = new Timer(timeSelectorElement); timeSelectorName.set(i*5,0); } for (i = 1; i < 4; i++) { $('#wrapTimers').append( "<p class='text timerContainer' data='" + i+3 + "'>00:00</p>" ); $("[data='" + i+3 + "']").css({"top":littleYOffset, "left":littleXOffset * (i-2), "-webkit-transform":"scale(" + littleScale + ")", "opacity":littleOpacity}); var timeSelectorElement = "[data='" + i+3 + "']"; var timeSelectorName = "timeSelector"+i+3; timeSelectorName = new Timer(timeSelectorElement); timeSelectorName.set((i+3)*5,0); } //select the middle selectTime("[data='2']"); } function selectTime(selector) { TweenLite.to($(selector), 0.5, { "-webkit-transform":"scale(1)", "opacity":1 }); } //timer function function Timer (element) { var minutes, seconds, finalTimeInSeconds, displayMinutes, displaySeconds, interval = 1000, self = this, timeLeftToNextSecond = 1000, running = false; this.set = function(inputMinutes, inputSeconds) { finalTimeInSeconds = inputMinutes * 60 + inputSeconds; minutes = (Math.floor(finalTimeInSeconds / 60)); seconds = finalTimeInSeconds % 60; this.print(); } this.add = function(inputMinutes, inputSeconds) { finalTimeInSeconds += inputMinutes * 60 + inputSeconds; finalTimeInSeconds = (finalTimeInSeconds < 0) ? 0 : finalTimeInSeconds; minutes = (Math.floor(finalTimeInSeconds / 60)); seconds = finalTimeInSeconds % 60; this.print(); } this.subtract = function(inputMinutes, inputSeconds) { finalTimeInSeconds -= inputMinutes * 60 + inputSeconds; if(finalTimeInSeconds < 0) {nextTask()} finalTimeInSeconds = (finalTimeInSeconds < 0) ? 0 : finalTimeInSeconds; minutes = (Math.floor(finalTimeInSeconds / 60)); seconds = finalTimeInSeconds % 60; this.print(); } this.reset = function() { this.set(0,0); } this.print = function() { displayMinutes = (minutes.toString().length == 1) ? "0" + minutes : minutes; //ternary operator: adds a zero to the beggining displaySeconds = (seconds.toString().length == 1) ? "0" + seconds : seconds; //of the number if it has only one caracter. $(element).text(displayMinutes + ":" + displaySeconds); } this.run = function() { if (running == false) { running = true; var _f = function() { secondStarted = new Date; self.subtract(0, 1); interval = 1000; var theColorIs = $(element).css("color"); ac = setTimeout(_f,interval); } ac = setTimeout(_f, interval); } } this.stop = function() { if (running == true) { running = false; stopped = new Date; interval = 1000 - (stopped - secondStarted); clearTimeout(ac); } } } 

 body { background-color: #02BFC1; overflow: hidden; margin: 0; } #wrapTimers { width: 800px; margin: 40px auto; text-align: center; } .text { color: #F1F2F0; font-family: Oswald, sans-serif; -webkit-user-select: none; cursor: default; text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.2); } #CYTText { width: 800px; margin: auto; font-size: 50px; } .timerContainer { text-align: center; display: inline-block; font-size: 95px; margin: 0 10px; } 

 <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Oswald" > <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script> <div id="wrapTimers"></div>