I am in a javascript beginner class and I am stuck with my homework. I went over it what feels like a million times but for some reason, I am missing something and I can't find it. Many thanks in advance!!! It is set up so that if the link has the data-reveal attribute and there is a modal element with the matching ID it will allow for that link to be clicked and the modal appears.
My HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, inital-scale=1.0, shrink-to-fit=no">
<meta name="description" content="description">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<title>London</title>
<link rel="stylesheet" type="text/css" href="styles/main.css">
<link rel="stylesheet" type="text/css" href="styles/london.css">
</head>
<!-- Head End -->
<body>
<header id="header" class="header">
<!-- Image Banner -->
<div id="logoWrapper" class="logoWrapper">
<img src="images/welcometoengland.png" class="logo" title="Welcome to England" alt="Welcome to England">
</div>
<section id="banner" class="banner">
<img src="images/banner/london_banner_1.png" class="banner__image" alt="banner">
</section>
<!-- Primary navigation -->
<nav id="nav" class="nav">
<ul class="nav__links nav__items">
<li class="nav__item">
Home
</li>
<li class="nav__item">
London
</li>
<li class="nav__item">
Daytrips
</li>
<li class="nav__item">
Cost
</li>
<li class="nav__item">
Stay
</li>
<li class="nav__item">
Travel
</li>
<li class="nav__item">
Shop
</li>
<li class="nav__item">
Contact Us
</li>
</ul>
</nav>
</header>
<!-- Header End -->
<main id="main" class="main">
<!--Left Content -->
<div id="main__content" class="main__content">
<div class="intro__wrapper">
<div class="intro__left">
<h4 id="attractionLinks__heading" class="attractionLinks__heading"></h4>
<ul id="attractionLinks__list" class="attractionLinks__list"></ul>
<p class="attractionLinks__instructions">If you have already visited some attractions or would like to add additional attractions, click the button below to update your preferences:</p>
<button id="attractionLinks__showForm" class="attractionLinks__showForm">Select Attractions</button>
</div>
<div class="intro__right">
<h3 class="intro__heading">Welcome to the Lodon Attractions page!</h3>
<p class="intro__text"> As a current memeber of the International Travel Club, you may select the attractions you would like to visit and we will keeo you updated with travel tips. When you click the London tab, you will only see links to attractions you would like to visit.</p>
<div class="form__inputWrapper">
<form class="form travelerForm" id="travelerForm" name="travelerForm">
<div class="form__inputWrapper">
<label for="fullName" class="form__label">Full Name:</label>
<input name="fullName" id="fullName" class="form__input" type="text" pattern="^[A-Za-z]+\s[A-Za-z]+$" placeholder="" required>
</div>
<div class="form__inputWrapper form__inputWrapper--checkboxes">
</div>
<!--Submit-->
<div class="form__inputWrapper form__inputWrapper--submit">
<input name="submitTraveler" id="submitTraveler" class="submit button" type="submit" value="Submit Form">
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Right Sidebar -->
<div id="main__sidebar" class="main__sidebar">
<!--London Clock-->
<div id="londonTime__wrapper" class="londonTime__wrapper">
<img class="londonTime__image" src="images/bigben.png" alt="Big Ben Clock">
<p id="londonTime" class="londonTime"></p>
</div>
<!--Attractions Select Wrapper-->
<div id="attractions" class="attractions">
<div class="attractions__instructionsWrapper">
<!--Attractions Instructions-->
<h2 class="attractions__heading">
Select an item from the list to display a picture and description of the attraction.
</h2>
</div>
<!--Attractions Select Wrapper-->
<div class="attractions__selectWrapper">
<select id="attractions__list" class="attractions__list">
</select>
</div>
<!--Attractions Display Wrapper-->
<div class="attractions__displayWrapper">
<div class="attractions__imageWrapper">
<img src="images/slideshow/placeholder.jpg" class="attractions__image" alt="Attractions">
</div>
</div>
<!--Attractions Text Wrapper-->
<div class="attractions__textWrapper">
<p class="attractions__text"></p>
</div>
</div>
<!--Attractions End-->
</div>
<section class="modals">
<!--Big Ben Modal-->
<div id="BigBen_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">Big Ben</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/BigBen.jpg" alt="Big Ben">
</div>
<div class="modal__textWrapper">
<p class="modal__text">Whenever you think of London, you probably think of Big Ben, as it is one of England's most recognized landmarks.</p>
<p class="modal__text">Here are some <em>Quick Facts</em> about Big Ben:</p>
<p class="modal__text">Description: Big Ben is not actually the clock tower. It is the largest of the five bells inside of the clock tower</p>
<p class="modal__text">Location: It is at the House of Parliament in Westminster, London</p>
<p class="modal__text">Constructed; Completed in 1856, it took 13 years to build. It is about 315 feet high and hs 400 steps to reach the top</p>
<p class="modal__text">Tourists: Bet you didn't know that foreign tourists are not allowed to climb the 400 steps to the top of the tower, but native Englanders can arrange a tour through a member of parliament or a Lord. Please note that it is not wheelchair accessible.</p>
<p class="modal__text">Cost: Free</p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--London Zoo Modal-->
<div id="LondonZoo_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">London Zoo</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/londonzoo.jpg" alt="London Zoo">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--St. Paul's Cathedral Modal-->
<div id="StPaulsCathedral_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">St. Paul's Cathedral</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/StPaulsCathedral.jpg" alt="St. Paul's Cathedral">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--Tower of London Modal-->
<div id="TowerofLondon_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">Tower of London</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/toweroflondon.jpg" alt="Tower of London">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--British Museum Modal-->
<div id="BritishMuseum_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">British Museum</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/BritishMusuem.jpg" alt="British Museum">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--London Eye Modal-->
<div id="LondonEye_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">London Eye</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/londoneye.jpeg" alt="London Eye">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--London Aquarium Modal-->
<div id="LondonAquarium_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">London Aquarium</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/London Aquarium.jpg" alt="London Aquarium">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--Westminster Abbey Modal-->
<div id="WestminsterAbbey_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">Westminster Abbey</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/WestminsterAbbey.jpg" alt="Westminster Abbey">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--Thames River Cruise Modal-->
<div id="ThamesRiverCruise_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">Thames River Cruise</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/ThamesRiverCruise.jpg" alt="Thames River Cruise">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--Wellington Arch Modal-->
<div id="WillingtonArch_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">Wellington Arch</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/WellingtonArch.jpg" alt="Wellington Arch">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--Harrods Modal-->
<div id="Harrods_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">Harrods</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/Harrods.jpg" alt="Harrods">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--Shopping Modal-->
<div id="Shopping_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">Shopping</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/Shopping.jpg" alt="Shopping">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
</section>
</main>
<!-- Main End -->
<footer id="footer" class="footer"></footer>
<!--Footer End -->
<script src="scripts/cookies.js"></script>
<script src="scripts/main.js"></script>
<script src="scripts/select_list.js"></script>
<script src="scripts/banner.js"></script>
<script src="scripts/london.js"></script>
<script>displayLondonTime();</script>
</body>
</html>
Here is my Javascript:
const LondonAttractions = {
LondonZoo: "London Zoo",
BigBen: "Big Ben",
StPaulsCathedral: "St. Paul's Cathedral",
TowerofLondon: "Tower of London",
BritishMuseum: "British Museum",
LodonEye:"London Eye",
LondonAquarium: "London Aquarium",
WestminsterAbbey: "Westminster Abbey",
ThamesRiverCruise: "Thames River Cruise",
WellingtonArch: "Willington Arch",
Harrods: "Harrods",
Shopping: "Shopping"
};
const travelerForm = document.getElementById('travelerForm');
const travelerFormCheckboxWrapper = document.querySelector('#travelerForm .form__inputWrapper--checkboxes');
const attractionLinksHeading = document.getElementById('attractionLinks__heading');
const attractionLinksList = document.getElementById('attractionLinks__list');
const attractionLinksButton = document.getElementById('attractionLinks__showForm');
function generateCheckboxes() {
//If all the required parts exist
if(travelerForm && travelerFormCheckboxWrapper){
//For each daytrip in daytripsInfo
for(let key in LondonAttractions){
let checkbox = `
<div class="form__checkboxWrapper">
<label for="${key}" class="form__label">${LondonAttractions[key]}</label>
<input id="${key}" name="${key}" class="form__input" type="checkbox" placeholder="">
</div>
`;
travelerFormCheckboxWrapper.insertAdjacentHTML('beforeend', checkbox);
}//End of Foor Loop
} //End of if statement
} //End of function
generateCheckboxes();
if(travelerForm) {
travelerForm.addEventListener('submit', function(event) {
// Prevent the form from submitting
event.preventDefault();
var numChecked = 0;
const checkboxes = document.querySelectorAll('#travelerForm [type="checkbox"]');
// Loop over checkboxes
for(let i = 0; i < checkboxes.length; i++) {
// Check if the checkbox is checked
if(checkboxes[i].checked === true) {
// Increment numChecked variable
numChecked++;
//Set a cookie using the checkbox name
Cookies.set(checkboxes[i].name, true, {expires: 7});
}
//If a checkbox is not selected
else{
//If a cookie exists for that checkbox
if(Cookies.get(checkboxes[i].name)) {
//Delet the Cookie
Cookies.remove(checkboxes[i].name);
}
//Note: An alternative would be to set the cookie value to 'false'
//Cookies.set(checkboxes[i].name, false, { expires: 7});
}
}
if(numChecked > 0 && travelerForm.checkValidity()) {
Cookies.set('travelerName', travelerForm.fullName.value, { expires: 7});
// Submit the form
travelerForm.submit();
// Reset numChecked variable
numChecked = 0;
}
else if(numChecked === 0) {
alert('You must select at least one London attraction!');
}
});
}
//If both the 'travelerName' cookie and the attraction links heading exist
if(Cookies.get('travelerName') && attractionLinksHeading){
attractionLinksHeading.textContent = `Attraction Links for ${Cookies.get('travelerName')}`;
} else if(attractionLinksHeading) {
attractionLinksHeading.textContent = "Attraction Links";
}
if(attractionLinksList && travelerForm) {
//Show form by default
var showForm = true;
//For each of our attractions
for(let key in LondonAttractions) {
//If the cookie name esists
if(Cookies.get(key)) {
//Create our list item and link
let item = `<li class="attractionLinks__item">
<p data-reveal="${key}_modal" aria-controls="${key}" aria-haspopup="true" class="attractionLinks__link" role="button" tabindex="0">${LondonAttractions[key]}</p>
</li>`;
//Add the list item and link to the list
attractionLinksList.insertAdjacentHTML('beforeend', item);
//They have already submitted their preferences, hide from for now
showForm = false;
}
}
if(showForm === false) {
//Add modifier class that will be used to hide the form
travelerForm.classList.add('--hide');
}
const attractionLinks = document.querySelectorAll('.attractionLinks__link');
if(attractionLinks.length > 0) {
//If at least one link exists
for(let i = 0; i < attractionLinks.length; i++) {
//Get link data-reveal attribute
let id = attractionLinks[i].dataset.reveal;
//If the link has the data-reveal attribute, and there is a modal element with that matching ID
if(id && document.getElementById(id)) {
let modal = document.getElementById(id);
let closeButton = modal.querySelector('.modal__close');
//Add click event listner to link
attractionLinks[i].addEventListener('click', function(event) {
//If the modal exists and it does not have the --reveal class
if(!modal.classList.contains('--reval')) {
modal.classList.add('--reval');
}
});
//If close button exists within modal
if(closeButton) {
//Add click event listner to close button
closeButton.addEventListener('click', function(event) {
//If the modal had the --reveal class
if(modal.classList.contains('--reveal')) {
//Remove it (hides the modal)
modal.classList.remove('--reveal');
}
});
}
}
}
}
}
//If the button and the form both exist
if(attractionLinksButton && travelerForm) {
attractionLinksButton.addEventListener('click', function(event) {
//Check if the traveler form has the --hide class
if(travelerForm.classList.contains('--hide')) {
//Remove the --hide class
travelerForm.classList.remove('--hide');
//Add the --show class
travelerForm.classList.add('--show');
}
});
}
london.js -> Line 134 /* Problem */
If you add "--reveal" to the classList, that would make the class="initial --reveal"; //there is a space between initial and --reveal
Because on that line the css won't trigger
london.css -> line 82
To fix the problem:
//To solve the problem delete the line 134 from london.js and replace with
modal.className += '--reveal';
I've got a combination of html and php that makes my markup as follows:
<div class="row">
<?php foreach($requests as $request) : ?>
<div class="item col-md-3 col-sm-12">
<p class="telegram_id">
<?php echo $request['telegram_id'].' restaurants id'; ?>
</p>
<p class="restaurant_name">
</p>
<p class="places">
<?php echo $request['places_count'].' places are left now'; ?>
</p>
<p class="discount">
<?php echo $request['discount_count'].' % is the discount U get in this restaurant booking with us'; ?>
</p>
<p class="timestamp">
<?php echo 'Updated at '.$request['created_at']; ?>
</p>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal">Wanna order</button>
</div>
<?php endforeach; ?>
</div>
At the end there is a button and there is a markup for the modal as well. How do I pass data froward to the modal according to which button was pressed. I mean, let's say there are 10 div's of class item with different contents and 10 different buttons. How do I get the p tags that are inside the div where the button was pressed?
you can call a function with <div> id when user click on the <div> and this id should be dynamic that generate with your loop index. for example, I show you 2 div with id item1 and item2 , here 1 and 2 is your loop index.
function getPContent(item){
alert($("#"+item+" p.telegram_id").text()+ $("#"+item+" p.places").text()+$("#"+item+" p.discount").text()+$("#"+item+" p.timestamp").text());
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="item1">
<p class="telegram_id">
telegram_id1
</p>
<p class="restaurant_name">
</p>
<p class="places">
places1
</p>
<p class="discount">
discount1
</p>
<p class="timestamp">
timestamp1
</p>
<button type="button" onclick="getPContent('item1')">Wanna order</button>
</div>
<div id="item2">
<p class="telegram_id">
telegram_id2
</p>
<p class="restaurant_name">
</p>
<p class="places">
places2
</p>
<p class="discount">
discount2
</p>
<p class="timestamp">
timestamp2
</p>
<button type="button" onclick="getPContent('item2')">Wanna order</button>
</div>
I am using a PHP script which has a module of Article Posting
User needs to select a thumbnail else it gives an error. I want to remove mandatory validation, and when user has not selected any Thumnail, then it should select a default image somewhere from directory.
PHP Page:
<div id="thumbselect" class="hide bd margin-bottom-20 box">
<div class="upload-header">
<span><?= Lang::get('post_thumb_head') ?></span>
<a title="<?= Lang::get('upload_thumb') ?>" class="sendimg upload-image tip" href="#"><i class="pe-none icon-upload2"></i></a>
</div>
<div class="rightbox">
<div class="preview cover"><img src="Template/Images/imgplaceholder.jpg" class="topimg sendimg" style="opacity: 1;"></div>
</div>
</div>
<div id="photocover" class="hide">
<div class="upload-header">
<span><?= Lang::get('post_thumb_head') ?></span>
</div>
<div id="thmb" class="rightbox bd">
<div id="thmbinner" class="preview"></div>
<i class="icon-angle-left"></i>
<i class="icon-angle-right"></i>
</div>
</div>
<div id="frameselect" class="hide">
<a id="setframe" class="bttn bttn-primary selectframe" style="display:block;margin:4px;"><?= Lang::get('select_another_frame') ?></a>
<div id="mp4preview" class="rightbox bd hide"></div>
</div>
JavaScript page
define(["jquery","utils","tinyMCE"],function(e,t){var n,a={File:t.Query("#file"),Tags:t.Query("#input-tags"),Form:t.Query("#submitArticle"),Thumb:t.Query("#thumbselect"),AddImg:t.Query(".sendimg")},r={Init:function(){t.ResetCache(),r.initMCE(),r.setEvents(),r.setPlugins()},initMCE:function(){require(["tinycfg","tinyMCE"],function(e){tinyMCE.init(t.Extend(e.extended,{file_browser_callback:function(e,t,r,i){"image"==r&&(n="art",a.File.click())}}))})},UploadFile:function r(){var i=new FormData,o=new t.NodeCache,s=new XMLHttpRequest,u=a.File.files[0],g=o.FindElems({line:"#progress-bar",total:"#progress-total",status:"#progress-status",progress:".progress"});r.progress=function(e){g.total.innerHTML=Lang.get("prefix_uploaded")+" "+(e.loaded/1048576).toFixed(2)+" "+Lang.get("of")+" "+(e.total/1048576).toFixed(2)+" MB";var t=e.loaded/e.total*100;g.line.value=Math.round(t),g.status.innerHTML=Math.round(t)+"%"},r.complete=function(a){var r=a.target.responseText,i=JSON.parse(r);"thumb"!=n?(e(g.progress).delay(2500).slideUp(1e3),"duplicate"==i.status?t.Info("error",Lang.get("note_error_head"),Lang.get("img_exists")):tinyMCE.activeEditor.execCommand("mceInsertContent",!1,'<img style="width: 100%" src=\'Uploads/Temp/'+i.userdir+"/"+i.filename+"'>"),g.status.innerHTML=Lang.get("img_uploaded")):t.Query(".topimg").src="Uploads/Temp/"+i.userdir+"/"+i.filename},r.error=function(e){g.status.innerHTML=Lang.get("an_error_occured")},"image/jpeg"==u.type||"image/png"==u.type?(g.line.value=0,"art"==n&&e(g.progress).slideDown(1e3),t.Info("info",Lang.get("please_wait"),Lang.get("uploading_img")),t.Query(".mce-close")&&t.Query(".mce-close").click(),i.append("file",u),i.append("option","thumbnail"),"thumb"==n&&i.append("hash","cover"),s.upload.onprogress=r.progress,s.addEventListener("load",r.complete,!1),s.addEventListener("error",r.error,!1),s.open("POST",t.Path.Image),s.send(i)):(t.Query(".mce-close").click(),t.Info("error",Lang.get("img_invalid_head"),Lang.get("img_invalid_ext")))},setPlugins:function(){e(a.Tags).tagsInput(),e(a.Thumb).fadeIn()},setEvents:function(){PubSub.subscribe("unload",t.ResetCache),a.File.addEventListener("change",r.UploadFile),a.Form.addEventListener("submit",r.Submit),a.AddImg.forEach(function(e){e.addEventListener("click",r.SendImage)})},SendImage:function(e){e.preventDefault(),n="thumb",t.Query("#file").click()},Submit:function(n){n.preventDefault();var i=t.ParseForm.call(this);return i.Data.type="article",i.Data.desc=tinyMCE.get("art_content").getContent(),e.ajax({type:"POST",url:t.Path.Subm,data:i.Data,beforeSend:function(){t.Loading(Lang.get("please_wait"))},success:function(n){t.Loading(Lang.get("please_wait")),1!=n?t.Info("error",Lang.get("an_error_occured"),n):(t.Query(".topimg").src="Template/Images/imgplaceholder.jpg",e(a.Thumb).hide(),t.Info("success",Lang.get("success"),Lang.get("post_submitted")),r.ResetForm()),t.Loading("close")}}),!1},ResetForm:function(){a.Form.reset(),tinyMCE.get("art_content").setContent("");for(var e=document.getElementsByClassName("tag");e[0];)e[0].parentNode.removeChild(e[0])}};r.Init()});
Thumbnail goes to /Uploads/Media/Mar19/Sat30/291/cover.jpg.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I got an javascript onclick function that (should) listen to a specific a tag based on the current score. It´s for a quiz. The onlick function listens for the click on the right answer (has class right). In the beginnig the right answer that the function should listen to is the first a tag with the class right. After this answer has been clicked the function should get executed and the question changes and the score is raised by one. Now the function should listen to the second a tag with the right class. I got a variable score2 that always is the value needed to select the right a tag but it ins´t working.
The Code:
var score = 0
var score2 = 0
document.getElementById("go").onclick = function() {
score++;
console.log(score);
console.log(score2);
document.getElementById("head").style.display="inline";
document.getElementById("question0").style.display="none";
document.getElementById("question1").style.display="block";
};
document.getElementsByClassName("right")[score].onclick = function(){
score++;
score2++;
//console.log(score);
console.log(score2);
document.getElementById("question"+score2).style.display="none";
document.getElementById("question"+score).style.display="inline";
};
and the html (the quiz is in german)
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="body">
<div id="inbody">
<div id="question0">
<h1>
WELCOME TO THE 100 QUESTION GAME!
</h1>
<h2 id="go" style="color:pink">
Lets GO!
</h2>
<p>
by strawberry studios
</p>
</div>
<div id="head" style="display:none;">
<h1>THE 100 QUESTION GAME</h1>
</div>
<div id="question1" style="display:none;">
<h3>
Von wo aus kann man nur nach Süden gehen?
</h3>
<br>
<br>
<a id="questionOneAnswerOne" class="right">Nordpol</a> <br> <!--Richtig-->
<a id="questionOneAnswerTwo" class="wrong" href="http://100questiongame.tk/index.html">Südpol</a> <br>
<a id="questionOneAnswerThree" href="http://100questiongame.tk/index.html" class="wrong">Äquator</a> <br>
<a id="questionOneAnswerFour" class="wrong" href="http://100questiongame.tk/index.html">Bayern</a> <br>
</div>
<div id="question2" style="display:none;">
<h3>
Was ist am teuersten?
</h3>
<br>
<br>
<a id="questionTwoAnswerOne" href="http://100questiongame.tk/index.html" class="wrong">Diamant</a> <br>
<a id="quoestionTwonswerTwo" href="http://100questiongame.tk/index.html" class="wrong">Platin</a> <br>
<a id="questionTwoAnswerThree" href="http://100questiongame.tk/index.html" class="wrong">Gold</a> <br>
<a id="questionTwoAnswerFour" class="right">Osmium</a> <br> <!--Richtig-->
</div>
<div id="question3" style="display:none;">
<h3>
Wofür steht HTML?
</h3>
<br>
<br>
<a id="questionThreeAnswerOne" href="http://100questiongame.tk/index.html" class="wrong">Hyper Text Multiple Language</a> <br>
<a id="questionThreeAnswerTwo" href="http://100questiongame.tk/index.html" class="wrong">Hyper Text Markup Language</a> <br> <!--Richtig-->
<a id="questionThreeAnswerThree" class="right">Hydrotecinmultiliquid</a> <br>
<a id="questionThreeAnswerFour" href="http://100questiongame.tk/index.html" class="wrong">Hype The Mother (a)lLong<a/> <br>
</div>
<div id="question4" style="display:none;">
<h3>
Welche Farbe hätte Cola ohne Farbstoffe?
</h3>
<br>
<br>
<a id="questionFourAnswerOne" href="http://100questiongame.tk/index.html" class="wrong">Gelb</a> <br>
<a id="questionFouranswerTwo" href="http://100questiongame.tk/index.html" class="wrong">Erdbraun</a> <br>
<a id="questionFourAnswerThree" class="right">Grün</a> <br> <!--Richtig-->
<a id="questionFourAnswerFour" href="http://100questiongame.tk/index.html" class="wrong">Türkis<a/> <br>
</div>
<div id="question5 "tyle="display:none;">
</div>
<div id="question6" style="display:none;">
</div>
<div id="question7" style="display:none;">
</div>
<div id="question8" style="display:none;">
</div>
<div id="question9" style="display:none;">
</div>
<div id="question10" style="display:none;">
</div>
<script type="text/javascript" src="javascript.js"></script>
</div>
</div>
</body>
got to http://100questiongame.tk to test the code and go to https://floobits.com/BenBals/quiz.sublime-project to see the code live as I editing.
This is a way to do it:
Demo: http://jsfiddle.net/97gCk/3/
<div id="question1" style="display:none">
<h3>
Von wo aus kann man nur nach Süden gehen?
</h3>
<br><br>
<a id="question1_1" onclick="nextQuestion(this)" href="#">Nordpol</a><br>
<a id="question1_2" class="wrong" href="..">Südpol</a><br>
<a id="question1_3" class="wrong" href="..">Äquator</a><br>
<a id="question1_4" class="wrong" href="..">Bayern</a><br>
</div>
JS
var score = 1;
document.getElementById("go").onclick = function() {
document.getElementById("go").style.display="none";
document.getElementById("question"+score).style.display="block";
};
function nextQuestion (el){
el.style.color="green";
document.getElementById("question"+score).style.display="none";
score++;
document.getElementById("question"+score).style.display="inline";
};
I have am creating my own comments system from scratch. The comments themselves are dynamically generated from those in the database and for each comment I am appending a reply textarea and button for the user to post a reply to someone's comment.
The problem is that when I click the reply link it opens a reply box for each comment not just for the comment the user wishes to reply to.
The HTML:
<a class="comment-reply">Reply</a>
<!--REPLY BOX -->
<div class="reply-box clearfix">
<?php if($signed_in) { ?>
<!-- reply input textarea -->
<div class="container">
<form id="reply-form">
<textarea id="reply" rows="1" placeholder="Your reply here..."></textarea>
<p><input id="reply-btn" type="submit" class="btn btn-primary floatL" value="Post reply" /></p>
</form>
</div>
<?php } ?>
</div>
And the jQuery:
<script>
$(document).ready(function(e) {
//hide reply box on page load
$('.reply-box').hide();
//show each individual reply box on click
$('.comment-reply').click(function() {
//$('.reply-box').stop().slideToggle("fast"); /* This opens all div */
$(this).next('.reply-box').stop().slideToggle("fast"); /* This doesn't work at all */
});
});
</script>
What am I doing wrong?
edit
Ok this is the full HTML:
<!--POSTED COMMENT-->
<div id="comment-<?php echo $comment_id; ?>" class="media">
<div class="pull-left">
<img style="height: 48px; width: 48px;" src="<?php echo $c_member_avatar; ?>" class="img-rounded" alt="">
<div style="font-size:1.2em">
<a style="color: #888888;" href="#">
<span class="glyphicon glyphicon-thumbs-up"></span>
</a>
<a style="color: #888888;" href="#">
<span class="glyphicon glyphicon-thumbs-down"></span>
</a>
</div>
</div>
<div class="media-body">
<h5 style="margin: 0 0 5px 0;"><?php echo $c_member_username; ?><small> <?php echo $comment_timestamp; ?> ago</small><small style="margin-right: 20px;" class="floatR"><a id="comment-flagged" href="#"><span style="color: #5A5A5A" title="Flag as inappropriate" class="glyphicon glyphicon-flag"></span></a></small></h5>
<p class="clearfix" style="margin-bottom:0px;"><?php echo $commentPosted; ?></p>
<?php if($signed_in && $username == $c_member_username) { ?>
<small class="floatL"><a class="comment-reply" id="<?php echo $comment_id; ?>" >Reply</a></small>
<small class="floatL"><a class="comment-remove" id="<?php echo $comment_id; ?>">Remove comment</a></small>
<?php } else if($signed_in) { ?>
<small class="floatL"><a class="comment-reply" id="<?php echo $comment_id; ?>" >Reply</a></small>
<?php } else { ?>
<small class="floatL">Sign in to reply to this comment</small>
<?php } ?>
</div>
</div>
<!--END POSTED COMMENT-->
<!--REPLY BOX -->
<div class="reply-box clearfix">
<?php if($signed_in) { ?>
<!-- comment input textarea -->
<div id="comment-box" class="container">
<form id="reply-form">
<textarea id="reply" rows="1" placeholder="Your reply here..."></textarea>
<p style="padding-top: 15px;"><input id="reply-btn" type="submit" class="btn btn-primary floatL" value="Post reply" /></p>
<p style="color:red; padding-left: 140px;" id="error"></p>
</form>
</div>
<?php } ?>
</div>
<!--END REPLY BOX-->
don't mind the styling, I am still prototyping
edit - added rendered page
<!--POSTED COMMENT-->
<div id="comment-139" class="media">
<div class="pull-left">
<img style="height: 48px; width: 48px;" src="members/nicklaw/assassin_creed_black_flag _2-140x140.jpg" class="img-rounded" alt="">
<div style="font-size:1.2em">
<a style="color: #888888;" href="#">
<span class="glyphicon glyphicon-thumbs-up"></span>
</a>
<a style="color: #888888;" href="#">
<span class="glyphicon glyphicon-thumbs-down"></span>
</a>
</div>
</div>
<div class="media-body">
<h5 style="margin: 0 0 5px 0;">nicklaw<small> 9 seconds ago</small><small style="margin-right: 20px;" class="floatR"><a id="comment-flagged" href="#"><span style="color: #5A5A5A" title="Flag as inappropriate" class="glyphicon glyphicon-flag"></span></a></small></h5>
<p class="clearfix" style="margin-bottom:0px;">this is a comment</p>
<small class="floatL"><a class="comment-reply" id="139" >Reply</a></small>
<small class="floatL"><a class="comment-remove" id="139">Remove comment</a></small>
</div>
</div>
<!--END POSTED COMMENT-->
<!--REPLY BOX -->
<div class="reply-box clearfix">
<!-- comment input textarea -->
<div id="comment-box" class="container">
<form id="reply-form">
<textarea id="reply" rows="1" placeholder="Your reply here..."></textarea>
<p style="padding-top: 15px;"><input id="reply-btn" type="submit" class="btn btn-primary floatL" value="Post reply" /></p>
<p style="color:red; padding-left: 140px;" id="error"></p>
</form>
</div>
</div>
<!--END REPLY BOX-->
Maybe the following code will help, I am using the parentElement of the current element and then get the textarea that is in the same group. When attaching the click handler I use a div with class comments-container and attach on click only for anchors (second parameter in the .on function).
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div class="comments-container">
<div class="comment">
Comment1
comment<br>
<textarea></textarea>
</div>
<div class="comment">
Comment2
comment<br>
<textarea></textarea>
</div>
<div class="comment">
Comment3
comment<br>
<textarea></textarea>
</div>
</div>
<script>
$("textarea").hide();
$(".comments-container").on("click","a",function(e){
e.preventDefault();
$("textarea").hide();
$(this.parentElement.getElementsByTagName("textarea")[0])
.stop().slideToggle("fast");
});
</script>
</body>
</html>
The problem is that the .reply-box is not at the same level in the DOM as the .comment-reply link that is clicked (i.e. not a sibling). If you see the documentation for .click you will see that it only searches the siblings.
I think you want the .parents(".media").next(".reply-box")