This peace of code works for the first click. but then it seems to not be able to get new ID from next click. the idea behind it is to show one piece of a form and with click on a button it hides first and shows second part. any idea what im doing wrong?
i guess it has something to do with "this" but from my understanding it should get the id from the second link also.
window.addEvent('domready', function()
{
$('page_2').slide('hide');
$('page_3').slide('hide');
$('page_4').slide('hide');
$('page_5').slide('hide');
var togglePrefix = 'toggle_', boxPrefix = 'page_', emptyPrefix = '';
var links = $('submit_box').getElements('a');
links.addEvent('click', function(e)
{
e.stop();
var id = $(this.get('id').replace(togglePrefix,emptyPrefix));
var id_new = parseInt($(this).get('id').replace(togglePrefix, emptyPrefix)) + 1;
var next = ('page_'+id_new);
var id_old = $(this.get('id').replace(togglePrefix,boxPrefix));
$(id_old).set('slide', {duration: 'long', transition: 'linear'});
$(id_old).slide('out');
$(next).slide('in');
});
});
the html follows this pattern:
<div id="page_1">
<div id="inhalt-gewinn">
<div id="gewinn_bild"></div>
<div id="gewinn_form">
<form id="gewinnspiel" name="gewinnspiel" method="post" action="<?=$_SERVER[PHP_SELF]; ?>">
<div id="input_box">
<div><input type="radio" name="frage1" value="Kamille" /><span>Kamille</span></div>
<div><input type="radio" name="frage1" value="Kaktus" /><span>Kaktus</span></div>
<div><input type="radio" name="frage1" value="Krokus" /><span>Krokus</span></div>
</div>
<div id="submit_box"><a id="toggle_1" class="frage">nächste Frage...</a></div>
</div>
<div id="gewinn_werbung"></div>
</div>
</div>
If I understand the example, you've got a bunch of divs with id page_1, page_2 and so on. In every div is a div with the id "submit_box". When you wrote $('submit_box').getElements('a') it will add the event only to the first div cause an id has to be unique. You cant have more then one element with a unique id in the page. So to get your example work change the id to a classname and use $$('div.submit_box a').
The use of ID´s multiple times on the page ruined the code!
After fixing this it worked fine
Related
Im trying to take the user input and add it to the page with the click of the button and add it to the page in a new paragraph element created thru javascript, I didn't want to use any inline javascript and I wanted to use as little html as possible and do it mainly thru javascript.
<body>
<div class="input">
<form>
<input id="input" type="text" placeholder="Enter task to do..." />
<button id="add_btn">Add</button>
</form>
</div>
<div class="task_list">
<ul id="todo">
<li></li>
</ul>
</div>
<script>
//take user input and add it to the page as a task to do
let div = document.querySelector('.task_list');
let input = document.querySelector('#input')
let pElement = document.createElement('p');
let add = document.getElementById('add_btn');
div.appendChild(pElement);
add.addEventListener(onclick, function (){
input.value;
pElement.innerHTML = input;
console.log(add);
});
</script>
You've got some problems with your code:
You're wrongly binding the event listener. You should use 'click' instead of onclick (which isn't defined anyway).
You didn't define any button type, so the button is treated as submit button, by default. Add type="button" attribute so that the page doesn't refresh on clicking on it.
In the event listener, you should create a fresh p element always, and assign its textContent with input.value (unless you're dealing with HTML content, in which case, innerHTML would be appropriate).
The following snippet makes the code work. Not sure what end result should be like (e.g. you may want to append the list items in ul), but this can get you on track.
//take user input and add it to the page as a task to do
let div = document.querySelector('.task_list');
let input = document.querySelector('#input')
let add = document.getElementById('add_btn');
add.addEventListener('click', function() {
let pElement = document.createElement('p');
pElement.textContent = input.value;
div.appendChild(pElement);
});
<div class="input">
<form>
<input id="input" type="text" placeholder="Enter task to do...">
<button type="button" id="add_btn">Add</button>
</form>
</div>
<div class="task_list">
<ul id="todo">
<li></li>
</ul>
</div>
when i trigger this jquery event, other element in other row of table got triggered as well which i want to prevent
$(document).ready(function(){
$(".Trigger_modi").delegate("a", "click",function(e){
e.stopPropagation();
var tnp = $(this).attr('id');
window.alert("tnp: "+tnp);
document.getElementById('modi_i').value=tnp;
$('#myDiv').html('<input type="button" name="modify" id="mD" value='+tnp+' onclick="modiTest.jsp">');
$('.inner_element_1').html('<input type="text" name="subject" value="">');
$('.inner_element_2').html('<h2 > yahoo</h2>');
$('.inner_element_3').html('<h2>yahoo</h2>');
$('.inner_element_4').html('<h2>yahoo</h2>');
$('.inner_element_5').html('<h2>yahoo</h2>');
var t = document.getElementById('modi_i').value
window.alert("t: "+t);
event.stopImmediatePropagation();
});
});
This is jquery function that would be triggered if i click "a" tag.
and this would make table look like this ↓↓↓↓↓↓↓↓
This is description of what is happening
<div class="Trigger_modi"> <div class="inner_element_2"><a id="<%=i %>">수정</a></div></div>
and this html code is wrapped by for loop which i suspect that it might be reason why i am getting trouble with
anyone suggest i could try?
<a class="Trigger" id="<%=idx %>"> <%=subject %></a>
<div class="Slider slideup">
<div id="Actual"><!-- 누르면 본문내용 보게됨. -->
</form>
<jsp:useBean id="bdao" class="Bob.Community.CommunityDAO" scope="session"></jsp:useBean>
<jsp:useBean id="bdto" class="Bob.Community.CommunityDTO"></jsp:useBean>
<div class="inner_element_1"><%=content %></div>
<div class="Trigger_modi"> <div class="inner_element_2"><a id="<%=i %>">Modify</a></div></div>
<div class="">
<div id="Actual_modi">
</div>
</div>
<div class="inner_element_3">Delete</div>
<div class="inner_element_4"></div>
<div class="inner_element_5"></div>
</div>
</div>
**
Edit 1) it works, appreciate for all you comment, reply
**
i first suspected that the problem was caused by for loop, and it turned out to be right.
[assume for loop loops 5times.]
when for loop finished and in javascript function triggers, the inner_element_(number) --> all 25 element(for loop 5 times * 5element) is set to same html tag for each number of element. i change it to something like <div class="inner_element_<%=idx%>"> which makes possible for 25 element to have a different class value individually. and it works fine. thanks
**
Edit 2) All I did to make it completely work fine : turned out Integrity problem
**
<div class="inner_element_(number) to <div class="inner_element_<%=idx %>
$('.inner_element_(number)') to $('.inner_element_'+tnp)
and i delete e.stopPropagation();
event.stopImmediatePropagation();
and i change $(".Trigger_modi").delegate("a", "click",function(e){ to $(".Trigger_modi").click( function (frm) {
$('.inner_element_1').html('<input type="text" name="subject" value="">');
$('.inner_element_2').html('<h2 > yahoo</h2>');
$('.inner_element_3').html('<h2>yahoo</h2>');
$('.inner_element_4').html('<h2>yahoo</h2>');
$('.inner_element_5').html('<h2>yahoo</h2>');
var t = document.getElementById('modi_i').value
In the above code you are assigning html to all .inner_element_1, .inner_element_2, .inner_element_3, .inner_element_4 and .inner_element_5 which jQuery will look all element with class inner_element_[1-5] of the whole page. So it may not raised another row event, it may just simply a HTML binding logic error in this case.
Try to revise your function as follow:
$(".Trigger_modi").each(function () {
var $Trigger_modi = $(this);
$Trigger_modi.delegate("a", "click",function(e){
e.stopPropagation();
var tnp = $(this).attr('id');
window.alert("tnp: "+tnp);
document.getElementById('modi_i').value=tnp;
$('#myDiv').html('<input type="button" name="modify" id="mD" value='+tnp+' onclick="modiTest.jsp">');
$Trigger_modi.find('.inner_element_1').html('<input type="text" name="subject" value="">');
$Trigger_modi.find('.inner_element_2').html('<h2 > yahoo</h2>');
$Trigger_modi.find('.inner_element_3').html('<h2>yahoo</h2>');
$Trigger_modi.find('.inner_element_4').html('<h2>yahoo</h2>');
$Trigger_modi.find('.inner_element_5').html('<h2>yahoo</h2>');
var t = document.getElementById('modi_i').value
window.alert("t: "+t);
event.stopImmediatePropagation();
});
Edit 1 -
Please wrap the above code inside a $(document).ready() and also revise the first 3 lines as follow:
$(".Trigger_modi").each(function () {
var $Trigger_modi = $(this);
$Trigger_modi.find("a").on("click", function(e){
....
Edit 2 -
After looked into your noticeList.jsp, I think you have to revise all your elements that contain the id attribute inside the for loop since it is not allowed to contains 2(or more) elements share the same id in HTML.
Also, since you are looping via for(int i= (n-1) ;i<=(n-1)+x;i++), it is not allowed in HTML that using digit only in the id attribute, so you have to revise your a element as follow as well:
<div class="Trigger_modi"> <div class="inner_element_2"><a id="<%=i %>" data-id="<%=i %>">Modify</a></div>
After that, you could give a class name for your td as follow:
<td class="TriggerCell">
<form name=f>
And revise the code in edit 1 as follow:
$(".TriggerCell").each(function () {
var $TriggerCell = $(this);
$TriggerCell.find(".Trigger_modi a").on("click", function(e){
var tnp = $(this).attr("data-id");
....
Try the following
$(document).ready(function(){
$(".Trigger_modi").on("click","a",function(e){
e.stopPropagation();
var tnp = $(this).attr('id');
window.alert("tnp: "+tnp);
document.getElementById('modi_i').value=tnp;
$('#myDiv').html('<input type="button" name="modify" id="mD" value='+tnp+' onclick="modiTest.jsp">');
$(this).parent().find('.inner_element_1').html('<input type="text" name="subject" value="">');
$(this).parent().find('.inner_element_2').html('<h2 > yahoo</h2>');
$(this).parent().find('.inner_element_3').html('<h2>yahoo</h2>');
$(this).parent().find('.inner_element_4').html('<h2>yahoo</h2>');
$(this).parent().find('.inner_element_5').html('<h2>yahoo</h2>');
var t = document.getElementById('modi_i').value
window.alert("t: "+t);
event.stopImmediatePropagation();
});
});
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>
I have a piece of javascript which allows for the selection of multiple choices. An example of the html is this:
Pick an option:
<br><br>
<div id="dialogue_container"> </div>
<div id="Append"> And then this happens.</div>
<div class="inlinechoice-0" id="0">
<a class="question" id="1">Choice 1</a><br>
<a class="question" id="2">Choice 2</a><br>
<a class="question" id="3">Choice 3</a>
</div>
<div class="answer-1">
You picked 1.
<div class="inlinechoice-1" id="1">
<a class="question" id="4">Choice 4</a><br>
<a class="question" id="5">Choice 5</a><br>
</div>
</div>
<div class="answer-2">
You picked 2.
</div>
<div class="answer-3">
You picked 3.
</div>
<div class="answer-4">
You picked 4.
<div class="inlinechoice-2" id="2">
<a class="question" id="6">Choice 6</a><br>
<a class="question" id="2">Choice 7 (2)</a><br>
</div>
</div>
<div class="answer-5">
You picked 5.
</div>
<div class="answer-6">
You picked 6.
</div>
<br><br>
<FORM>
<INPUT TYPE="button" onClick="history.go(0)" VALUE="Refresh">
</FORM>
Then I have some javascript here:
$('div[class*=inlinechoice').on('click','.question', function(e) {
var $this = $(this),
$id = $this.prop('id');
$("#dialogue_container").append($('.answer-' + $id).contents());
});
$('div[class*=inlinechoice').on('click', function(a) {
var $this = $(this),
$cid = $this.prop('id');
$('.inlinechoice-' + $cid).hide();
});
And then a little bit of CSS here:
div[class*='inlinechoice-'] { cursor: pointer; }
div[class*='answer-'] {display:none}
div[class*='append']{display:none}
The way it works is that all of the inlinechoice/answerclass/append class begin as hidden. As the user clicks the options, the javascript puts the appropriate answers into the dialogue_container div in the order that they are selected. However, I would like to add a final touch, and that is to show the contents of the append div once there are no more choices available to the user. I need to check the contents of the dialogue_container to see if there are any active inlinechoices(i.e. non hidden ones), and if there are none, then I can set the append div to be shown. I'm thinking the solution will be something like suggested here, but I'm not sure how to apply this to the contents of the dialogue container, as they are dynamic.
Thanks.
Codepen here
Edit: New Codepen here. I've added the following code to the first question onclick event and it's appending correctly to choices which have no nested choices (i.e. choices 2 and 3) in them, but not choice 1 (which has additional questions). I think rather than searching the entire contents of #dialogue_container, I need to just look at the contents of the last select #answer, however, this is proving a bit tricky.
$foo = $("#dialogue_container").append($('.answer-' + $id).contents());
$str = $foo.html();
$term = "question";
$index = $str.indexOf($term);
if($index != -1){
//Do Nothing
}
else{
$('#append').show();
}
Edit: Is there a particular reason why this works:
$foo = $("#dialogue_container").append($('.answer-' + $id).contents());
But this doesn't?
$('.answer-' + $id).contents();
I'm guessing it's something to do with using .contents() combined with a class rather than a div, but I'm not sure how to instruct the script to return just the contents of the last clicked answer class.
If I add the following in, I can get an alert to return the correct contents, but I don't want to hardcode the answer-id class like this:
alert($('[class*="answer-2"]').eq(0).html());
I've tried:
alert($('[class*="answer-"]' + $id).eq(0).html());
To try and pick up the correct answer class, but it doesn't return anything. I feel like I'm nearly there on this, but not quite!
Edit: Thanks to a little clarification here, I finally managed to figure this out! I'll add the answer below.
Missing ] in your attribute selector
$('div[class*=inlinechoice]').on('click', '.question', function(e) {
// -----^-----
var $this = $(this),
$id = $this.prop('id');
$("#dialogue_container").append($('.answer-' + $id).contents());
});
$('div[class*=inlinechoice]').on('click', function(a) {
// -----^-----
var $this = $(this),
$cid = $this.prop('id');
$('.inlinechoice-' + $cid).hide();
});
CODEPEN
So it turns out that the order in which I called things mattered (you'd think I'd be able to figure something like this out by now).
Adding the following into the javascript right after $id variable has been defined seems to have done the trick:
//This is the append code which adds the contents of the append div when there are no more choices.
$str = $('.answer-' + $id).html();
$index = $str.indexOf("question");
if ($index != -1) {
//Do Nothing
} else {
$('#append').show();
}
Codepen
lets say i have this lump of HTML:
<div class="container">
<span class="title">Heading 1</span>
This is a description..<br />
This is the second line..
<div class="image"><img src="image.jpg" /></div>
</div>
What i want to do using jQuery/JavaScript is hide/remove all text and elements between <span class="title"> and <div class="image">.
I've looked all over and found pretty much nothing. Any ideas on how i could do this?
How about something like this? http://jsfiddle.net/ZW8q2/1
var foo = $('.container').children(':not(br)');
$('.container').html('').html(foo);
You could try:
var str = $('.container .title').text() + $('.container .image').html();
$('.container').html(str);
JS Fiddle.
Try this:
Place a tag around what you want to hide, give div an ID name. So in the end your will look like:
<div id = "hideMe" style ="display:block">...Your Content...</div>
Use this javascript:
function hide()
{
document.getElementById('hideMe').style.display = "none";
return;
}
Have the Javascript function called whenever you want to hide the stuff between the div from a button (or other control) like this:
<input type= "submit" onclick ="hide()">