We Keep Coding

Open On button without access to JS File. Klaviyo. JQuery

I have an issue with js code. I'm trying to call a Pop-Up Box on click of the certain button and it's not working.
My aim is to assign an action to a certain button to open the pop-up when customer clicks on certain button. But the problem is that Klaviyo Pop-Up Box is set to open on page load by default settings are set in JS File that is located on Klaviyo side and i'm not able to change them directly.
Here is a problem similar to my, but not exactly what i was looking for.
Another option i was thinking about is to break the function that opens a pop-up onPageLoad and then to add this function to assign open action to a button.
This is how i thought i could call the pop-up onButtonClick.
My JS code
<script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
<script>
$('.button').on('click',function(){
KlaviyoSubscribe.attachToModalForm('#MainPage_PP');
});
</script>
or
<script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
<script>
$(':button').click(function() {
if (this.id == 'button') {
KlaviyoSubscribe.attachToModalForm('#MainPage_PP');
$('.button').popup('open');
}
</script>
Button Html Code
<input type="button" class="button" value="Input Button" />
My Pop-Up HTML Code
<div class="klaviyo_modal" id="MainPage_PP" style="display:none;">
<div class="klaviyo_inner">
×
<form action="//manage.kmail-lists.com/subscriptions/subscribe" method="POST" novalidate="novalidate" class="klaviyo_subscription_form">
<input type="hidden" name="g" value="LIST_ID">
<div class="klaviyo_fieldset">
<p class="klaviyo_header">Interested in our Newsletter?</p>
<p class="klaviyo_subheader">Stay in the know with news and promotions.</p>
</div>
<div class="klaviyo_fieldset">
<div class="klaviyo_field_group">
<label for="MainPage_PP_$email">Email Address</label>
<input type="email" id="MainPage_PP_$email" name="email"></div>
</div><div class="klaviyo_fine_print"></div>
<div class="klaviyo_form_actions">
<button type="submit" class="klaviyo_submit_button">
<span>Subscribe</span>
</button>
</div>
<div class="klaviyo_below_submit" ></div>
</form>
<div class="error_message" ></div>
<div class="success_message" ></div>
</div>
</div>

I assigned id="target" to the button to let the JS to make manipulations with it.
The important thing is that the Klaviyo JS file should be load after all actions to let the embedded button work properly.
HTML Code. Button
<input type="button" class="button" id="target" value="Input Button" />
JS Code
<script>
$( "#target" ).click(function() {
KlaviyoSubscribe.attachToModalForm('#MainPage_PP', {
//some var for Klaviyo
...
});
// It is essentially important to load the Klaviyo JS file after all actions
$.getScript("//www.klaviyo.com/media/js/public/klaviyo_subscribe.js")
});
</script>

making a simple quiz system with direct answer

I know there are a lot of free/paid quiz systems out there, but none are customizable enough, especially that I need it in RTL direction.
Anyway, I have made this simple script: fiddle
<!-- question 1 -->
<div id="01">hello there
<br />
<input id="01_correct_btn" type="button" onclick="getElementById('01_correct').style.display = 'block';
getElementById('01_continue').style.display = 'block'; this.style.display = 'none'; getElementById('01_wrong_a').style.display='none';getElementById('01_wrong_b').style.display='none'" />Hi
<br />
<input id="01_wrong_a" type="button" onclick="getElementById('01_wrong').style.display = 'block';
getElementById('01_continue').style.display = 'block'; this.style.display = 'none'; getElementById('01_correct_btn').style.display='none';
getElementById('01_wrong_b').style.display='none'" />bye
<br />
<input id="01_wrong_b" type="button" onclick="getElementById('01_wrong').style.display = 'block';
getElementById('01_continue').style.display = 'block'; this.style.display = 'none'; getElementById('01_correct_btn').style.display='none';
getElementById('01_wrong_a').style.display='none'" />thanks
<br />____________________
<div id="01_correct" style="display:none">yep, you're right...
<br />
</div>
<div id="01_wrong" style="display:none">You are so wrong
<br />
</div>
<input style="display:none" type="button" id="01_continue" onclick="getElementById('01').style.display = 'none';
getElementById('02').style.display = 'block'" value="continue" />
</div>
<!-- question 2 -->
<div id="02" style="display:none">question 2: Welcome to the real world</div>
1: How can I hide all wrong answers without having to add all their ids (getElementByClassName didn't work)
2: Instead of re-copying the script for each question, can this be done by JavaScript where in each new form:
a. a "correct_btn" displays a "correct_note" and hides all other buttons
b. "wrong_btn"s display a "wrong_note" and hides all other buttons
c. both "correct_btn" and "wrong_btn"s will display the continue button
d. "continue" button hides current div/form and displays next one
It would be much easier this way to create as much questions as possible.
Thank you very much.

I would suggest looking at the HTML class system. As you can assign one class to multiple items. Then just create a script instead of calling the onclick javascript event.
I know you requested javascript, but you tagged JQuery and as I feel a JQuery script would serve you better for what you are trying to do I suggested that. Doing this with Javascript could get very wordy and complicated.
HTML
<div id="Q1">Hello There<br/>
<div class = "Q1 correct choice"><input type="button"/>Hi</div>
<div class = "Q1 wrong choice"><input type="button"/>Bye</div>
<div class = "Q1 wrong choice"><input type="button"/>Thanks</div>
</div>
<div id="Q1_Correct" style="display: none;">You are correct</div>
<div id="Q1_Wrong" style="display: none;">You are wrong</div>
You can also set up a generic correct/wrong message to be displayed.
Now, using JQuery would probably be easiest... like in this fiddle : http://jsfiddle.net/p5YY4/1/ (its not perfect, but some styling should solve some click issues... but I think you can get the gist)
JQuery
$('.choice').on('click', function() {
var parent = $(this).parent().attr('id');
if($(this).hasClass('correct')){
$('.choice').hide();
var response = "#" + parent + "_Correct";
$(response).show();
}
if($(this).hasClass('wrong')){
$('.choice').hide();
var response = "#" + parent + "_Wrong";
$(response).show();
}
});
Let me know if you have any questions about this.
For making the script native to one document here is what you would need to set up to get it to work :
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//The script I have already provided should go here
});
</script>
You can also create a separate document and call it lets say quizWorker.js
and then using the same layout as I just stated (in the js file I would also put the script in the $(document).ready function)
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="quizWorker.js"></script>

On button click, select a sibling element with JQuery

I have this code:
<div class="item">
<div class="hidden">44</div>
<input type="submit" id="btnAddCommentForAnswer" value="Add Comment" />
<script type="text/javascript">
$(document).ready(function () {
$('#btnAddCommentForAnswer').click(function () {
alert(XXX);
});
});
</script>
</div>
<div class="item">
<div class="hidden">12</div>
<input type="submit" id="btnAddCommentForAnswer" value="Add Comment" />
<script type="text/javascript">
$(document).ready(function () {
$('#btnAddCommentForAnswer').click(function () {
alert(XXX)
});
});
</script>
</div>
what code should I put at XXX to get the content of the div with class=hidden when i press the button at the same div with class=item?
If you click the first button you should get 44, and for clicking the second button you get 12.

id's are meant to be unique; you may wish to consider changing the id to a class.
With that in place, you could use a script like the following to achieve what you want:
$(document).ready(function() {
$('.btnAddCommentForAnswer').click(function() {
alert($(this).siblings('.hidden').text());
});
});
Here's a JSFiddle example: JSFiddle
Also, you don't need to have two script tags in your script! This one script wrapped in <script> tags is all that is necessary :)

Haven't tried but this should work:
$(this).closest('div').text()

You need not repeat the javascript code multiple times. Also, you cannot use id in jquery as the buttons have same id.
Here is the jsfiddle http://jsfiddle.net/t8XJZ/ which might solve your problem.

maybe this is more useful for you...
jquery:
$(document).ready(function () {
$('.item').each(function(){
$(this).find("#btnAddCommentForAnswer").click(function () {
alert($(this).prev(".hidden").text())
});
});
});
html:
<div class="item">
<div class="hidden">44</div>
<input type="submit" id="btnAddCommentForAnswer" value="Add Comment" />
</div>
<div class="item">
<div class="hidden">12</div>
<input type="submit" id="btnAddCommentForAnswer" value="Add Comment" />
</div>

Show function in Jquery not responding

I am trying to use some show hide functions in my js file:
$(document).ready(function() {
$('#me').hide();
$('#send').click(function() {
$('#me').show("slow");
});
});
for some reason, when i click the id="send" button, the id="me"(a picture)
is not showing up again(though it disappears):
<div id="me">
<img src="Me.JPG" alt="me" width="450" height="450" alt="picture" align="right"/>
</div>
help please?
please let me know if i have to add more code to make myself clear...
thank you!
EDIT:
here is the code for the send button:
<input type="submit" id="send" value=" Send " class="submit" />

I would say the most likely answer is the send button does not yet exist when your page is loaded. Is this button being created dynamically, or through some other mechanism? To debug, I would say:
$(document).ready(function() {
$('#me').hide();
alert(document.getElementById('send')); //Test if it exists
$('#send').click(function() {
$('#me').show("slow");
});
});
If you get a popup with null, then you'll have to track down where this button gets generated and bind the event there.
Other than that, as you can tell from:
jsfiddle.net/zs7W2/
Your code works fine.
UPDATE:
I believe your FORM is actually submitting itself. You should change your code to:
$(document).ready(function() {
$('#me').hide();
$('#send').click(function() {
$('#me').show("slow");
return false; //Prevent submit
});
});
Or, use a <button type="button"> or <input type="button">
Example: http://jsfiddle.net/zs7W2/7/

<div id="me">
<img src="Me.jpg" alt="me" width="450" height="450" alt="picture" align="right"/>
</div>
<input type="button" id="send" value="Submit">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#me').hide();
$('#send').click(function() {
$('#me').show("slow");
});
});
</script>
I've used something like this. It works. I guess that some problem with image align. Try to change it.

alerts in else statements

Why won't this code work correctly? If someone selects something with an id of of '1599' then an alert will show "$1,599.00". If the id does not match, then the alert should show "$1,499.00". But it doesn't. Could someone help me figure this out?
thanks
<html>
<script type="text/javascript">
function showPrice(){
var a = document.getElementById();
if (a == "1599"){
alert("$1,599.00");
}
else {
alert("$1,499.00");
}
}
<body>
<div class="hc_right">
<input type="button" class="spc" value="Price" onclick="showPrice()" />
<p class="price" id="1599">$1,599.00</p>
</div>
<div class="hc_right">
<input type="button" class="spc" value="Price" onclick="showPrice()" />
<p class="price" id="1499">$1,499.00</p>
</div>
</div>
</body>
</html>

You need to let showPrice know which element you want to show the alert for. Right now, you're not actually selecting anything with the document.getElementById (a will be either null or undefined at this point).
There are a bunch of different ways to go about doing this, but to keep it close to your current implementation, I might do something like this:
HTML
<div class="hc_right">
<input type="button" class="spc" value="Price" onclick="showPrice(1599)" />
<p class="price" id="1599">$1,599.00</p>
</div>
<div class="hc_right">
<input type="button" class="spc" value="Price" onclick="showPrice(1499)" />
<p class="price" id="1499">$1,499.00</p>
</div>
</div>
Javascript
function showPrice(a){
if (a == "1599"){
alert("$1,599.00");
}
else {
alert("$1,499.00");
}
return false;
}
Fiddle here

I think you will see the issue if you add an
alert(a);
before the if(...) -- My guess is that you aren't getting the value you expect in there.

The document.getElementById() method takes a parameter of the ID to look for. Something like:
document.getElementById("1599")
and will return the document element that has that ID. Not sure what it will return when no parameter is passed.