We Keep Coding

Getting the ID and inner text of the element (children) inside a div

I have multiple div's that represent some products, example below :
<div class="special" id="special">
<a href="12v.html" class="special-link">
<p class="special-img">
<img src="img/25.png" alt="">
</p>
<h3><span id="pdctName">12v XXXXXXXXXXXXXXX</span></h3>
</a>
<p class="special-info">
<span class="ribbon2 animated swing infinite">
<span>Oferta!</span>
</span>
Ofertas especiales
<span class="special-price">200,00 €</span>
<del style="margin-top: -9px;">250,00 €</del>
+ Add to cart
</p>
</div>
Troubles getting the ID (so the value) of some elements inside this division (div id="special") :
i want for example to get the ID of <span id="pdctName"> and <span class="special-price">.
The element that triggers my function is
+ Add to cart.
i tried document.querySelector('#special span#pdctName').innerText, it works only for the first occurence of this div, but i want to retrieve those elements for the selected division.

Yes getElementById always give you first element. You have to find element using this object
Example is as follow
var buttons=document.getElementsByClassName("js-cd-add-to-cart");
[].slice.call(buttons).forEach(x=>{
x.addEventListener('click',function(obj){
console.log(this.closest("#special").innerText);
return false;
})
})
<div class="special" id="special">
<a href="12v.html" class="special-link">
<p class="special-img">
<img src="img/25.png" alt="">
</p>
<h3><span id="pdctName">12x XXXXXXXXXXXXXXX</span></h3>
</a>
<p class="special-info">
<span class="ribbon2 animated swing infinite">
<span>Oferta1</span>
</span>
Ofertas especiales1
<span class="special-price">300,00 €</span>
<del style="margin-top: -9px;">450,00 €</del>
+ Add to cart
</p>
</div>
<div class="special" id="special">
<a href="12v.html" class="special-link">
<p class="special-img">
<img src="img/25.png" alt="">
</p>
<h3><span id="pdctName">12v XXXXXXXXXXXXXXX</span></h3>
</a>
<p class="special-info">
<span class="ribbon2 animated swing infinite">
<span>Oferta1</span>
</span>
Ofertas especiales
<span class="special-price">600,00 €</span>
<del style="margin-top: -9px;">150,00 €</del>
+ Add to cart
</p>
</div>

First, you have to attach event on every add(+) button
Then call parent div element using this.parentElement.parentElement
Then get values using querySelector
function addtocart(){
event.preventDefault();
var spanid = this.parentElement.parentElement.querySelector("a h3 span").id;
var price = this.parentElement.parentElement.querySelectorAll("p span")[2].innerText;
console.log(spanid);
console.log(price);
}
[...document.querySelectorAll(".special-add")].forEach((btn)=>{
btn.addEventListener("click",addtocart);
});
<div class="special" id="special">
<a href="12v.html" class="special-link">
<p class="special-img">
<img src="img/25.png" alt="">
</p>
<h3><span id="pdctName">12v XXXXXXXXXXXXXXX</span></h3>
</a>
<p class="special-info">
<span class="ribbon2 animated swing infinite">
<span>Oferta!</span>
</span>
Ofertas especiales
<span class="special-price">200,00 €</span>
<del style="margin-top: -9px;">250,00 €</del>
+ Add to cart
</p>
</div>
This is best practice when data is dynamically added to pages.

I have a couple suggestions on how you could improve the structure of your special elements.
Data
If you want to extract data from a HTML element, and you have multiple pieces of data to extract, then consider using a form with input type="hidden" elements in there. They will not be visible to the user and can hold information that will be easy for you to use.
In combination with the FormData API you can access all of the input values in your form and add them to your cart if you need to.
If you do use the form element than change the <a class="special-add.. link to a button. I doesn't link anywhere anyway, so it probably should be a button.
IDs
It seems that you have multiple id attributes with the same values on your page, assuming you have more than one special. If that is the case, remove them or make them totally unique.
It's also the reason why getElementById doesn't work properly. It always finds the first element with the matching id.
Check the example below. If you have any questions please let me know.
function addSpecialToCart(event) {
/**
* Get all the inputs in the form.
*/
const formData = new FormData(event.target);
/**
* Show all data in the current form.
* Loop over the items in formData and
* show the name and value of each input.
*/
for (const [ name, value ] of formData) {
console.log(name, value);
}
/**
* Or get a single value by the name of the input.
*/
const productName = formData.get('product-name');
console.log(productName);
event.preventDefault();
};
document.addEventListener('submit', addSpecialToCart);
<div class="special">
<form class="special-form">
<input type="hidden" name="product-name" value="Product 1"/>
<input type="hidden" name="product-category" value="Ofertas especiales1"/>
<input type="hidden" name="special-price" value="150"/>
<a href="12v.html" class="special-link">
<p class="special-img">
<img src="img/25.png" alt="">
</p>
<h3><span class="pdctName">Product 1</span></h3>
</a>
<p class="special-info">
<span class="ribbon2 animated swing infinite">
<span>Oferta1</span>
</span>
Ofertas especiales1
<span class="special-price">150,00 €</span>
<del style="margin-top: -9px;">250,00 €</del>
<button type="submit" class="special-add cd-add-to-cart js-cd-add-to-cart">+ Add to cart</button>
</p>
</form>
</div>
<div class="special">
<form class="special-form">
<input type="hidden" name="product-name" value="Product 2"/>
<input type="hidden" name="product-category" value="Ofertas especiales2"/>
<input type="hidden" name="special-price" value="300"/>
<a href="12v.html" class="special-link">
<p class="special-img">
<img src="img/25.png" alt="">
</p>
<h3><span class="pdctName">Product 2</span></h3>
</a>
<p class="special-info">
<span class="ribbon2 animated swing infinite">
<span>Oferta1</span>
</span>
Ofertas especiales2
<span class="special-price">300,00 €</span>
<del style="margin-top: -9px;">450,00 €</del>
<button type="submit" class="special-add cd-add-to-cart js-cd-add-to-cart">+ Add to cart</button>
</p>
</form>
</div>
<div class="special">
<form class="special-form">
<input type="hidden" name="product-name" value="Product 3"/>
<input type="hidden" name="product-category" value="Ofertas especiales3"/>
<input type="hidden" name="special-price" value="1200"/>
<a href="12v.html" class="special-link">
<p class="special-img">
<img src="img/25.png" alt="">
</p>
<h3><span class="pdctName">Product 3</span></h3>
</a>
<p class="special-info">
<span class="ribbon2 animated swing infinite">
<span>Oferta1</span>
</span>
Ofertas especiales3
<span class="special-price">1200,00 €</span>
<del style="margin-top: -9px;">1450,00 €</del>
<button type="submit" class="special-add cd-add-to-cart js-cd-add-to-cart">+ Add to cart</button>
</p>
</form>
</div>

unexpected closing tag angular error

Writing an angular app in bulma, copied the template directly from the template site for testing and I get this error. I have checked and checked and everything is closed properly, yet somehow I keep getting an unclosed nav error. Oddly enough when I delete the closing nav tag, the site compiles correctly, but is broken. I have no idea what to do.
Code
<section class="hero is-info is-fullheight">
<div class="hero-head">
<nav class="navbar">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item" href="../">
<img src="http://bulma.io/images/bulma-type-white.png" alt="Logo">
</a>
<span class="navbar-burger burger" data-target="navbarMenu">
<span></span>
<span></span>
<span></span>
</span>
</div>
<div id="navbarMenu" class="navbar-menu">
<div class="navbar-end">
<span class="navbar-item">
<a class="button is-white is-outlined" href="#">
<span class="icon">
<i class="fa fa-home"></i>
</span>
<span>Home</span>
</a>
</span>
<span class="navbar-item">
<a class="button is-white is-outlined" href="#">
<span class="icon">
<i class="fa fa-superpowers"></i>
</span>
<span>Examples</span>
</a>
</span>
<span class="navbar-item">
<a class="button is-white is-outlined" href="#">
<span class="icon">
<i class="fa fa-book"></i>
</span>
<span>Documentation</span>
</a>
</span>
<span class="navbar-item">
<a class="button is-white is-outlined" href="https://github.com/dansup/bulma-templates/blob/master/templates/landing.html">
<span class="icon">
<i class="fa fa-github"></i>
</span>
<span>View Source</span>
</a>
</span>
</div>
</div>
</nav>
</div>
<div class="hero-body">
<div class="container has-text-centered">
<div class="column is-6 is-offset-3">
<h1 class="title">
Coming Soon
</h1>
<h2 class="subtitle">
$this is the best software platform for running an internet business. We handle billions of dollars every year for forward-thinking businesses around the world.
</h2>
<div class="box">
<div class="field is-grouped">
<p class="control is-expanded">
<input class="input" type="text" placeholder="Enter your email">
</p>
<p class="control">
<a class="button is-info">
Notify Me
</a>
</p>
</div>
</div>
</div>
</div>
</div>
Error
`compiler.js:486 Uncaught Error: Template parse errors:
Unexpected closing tag "nav". It may happen when the tag has already
been closed by another tag. For more info see
https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-
implied-end-tags ("
</div>
</div>
[ERROR ->]</nav>
</div>`

in my case I was forgetting a detail in the tag
<button class="btn btn-primary" (click) "handleClickMe()
">Click me !</button>
I forgot to put the "=" in (click)="handleClickMe()

Usually if you see an "Unexpected closing tag <something>" the problem isn't actually with that <something> but rather with an adjacent element that hasn't been properly closed. Paste stuff here: https://validator.w3.org or any similar HTML validator service, or use a better editor/IDE that offers syntax highlighting to help you find these errors.
You are missing a closing </div> tag.
You close navbar-brand, navbar-menu and navbar-end but you do not close <div class='container'>
As this missing </div> tag ought to be directly before </nav>, you get the error telling you, in fact, exactly where you ought to look. "I found a </nav> I wasn't expecting to see!" ... Ok, so go look at wherever you have a </nav> and figure out what element nearby is missing or has typos, etc.

Adding for future reference, for Angular
I've also seen this where you have invalid html like this
<p>
<div>
</div>
</p>
Change the p to a div and it'll work

Why ng-show is not working?

HTML
<div class="col-sm-1">
<a class="a" ng-click="aa()">
<span name="yesLink"></span>
</a>
</div>
<div class="col-sm-1">
<a class="a" ng-click="bb()">
<span name="NoLink"></span>
</a>
</div>
<div id="nnn" class="col-sm-7" align="left" >
<p ng-show="yes"> Text for yes</P>
<p ng-show="no"> Text for no</P>
</div>
JS
yesLink.onclick()=function()
{
scope.yes=true;
}
noLink.onclick()=function()
{
scope.no=true;
}
I have used the above code.I want to display message according to click.But it is not working. What is wrong with this code?
If yesLink is clicked, "Text for yes" should come and if NoLink is clicked ,"Text for no" should come.

I think, there is no need to add onclick method. just do this
<div class="col-sm-1">
<a class="a" ng-click="yes=true">
<span name="yesLink"></span>
</a>
</div>
<div class="col-sm-1">
<a class="a" ng-click="yes=false;">
<span name="NoLink"></span>
</a>
</div>
<div id="nnn" class="col-sm-7" align="left" >
<p ng-show="yes"> Text for yes</P>
<p ng-hide="yes"> Text for no</P>
</div>

I see Angular is being used in the above code so the HTML part will be
your controller part should be something like
Considering bb() and aa() as a click function
$scope.bb = function(){
$scope.yes = true;
}
$scope.aa = function(){
$scope.no = true;
}

The value you are checking against is a boolean but the value you are assigning to the variable is a string. You have two options>
OPTION 1:
Tell the ng-hide/show value to look for the string value,
ng-show="yes === 'true'".
OPTION 2:
In your function swap out the strings for boolean values,
scope.yes = true and NOT scope.yes="true"

No need for jquery, you can use ng-click, ng-click triggers the function in controler
<div class="col-sm-1">
<a class="a" ng-click="aa()">
<span name="yesLink"></span>
</a>
</div>
<div class="col-sm-1">
<a class="a" ng-click="bb()">
<span name="NoLink"></span>
</a>
</div>
<div id="nnn" class="col-sm-7" align="left" >
<p ng-show="yes"> Text for yes</P>
<p ng-show="no"> Text for no</P>
</div>
JS
scope.aa() = function(){
scope.yes = true;
}
scope.bb() = function(){
scope.no = true;
}

Add a span in a span with JQuery

I'm trying to put a <span> in an other <span> in the title of JQuery's modal but it doesn't work.
Here's my HTML code :
<div class="ui-dialog-titlebar...">
<span class="ui-dialog-title">Info title</span>
...
</div>
<div id="1">
And I want to put a <span class="glyphicon glyphicon-info-sign"></span> inside the ui-dialog-title <span>.
I tried to do it like this :
$(".ui-dialog-title").prepend('<span class="glyphicon glyphicon-info-sign"></span>');
And it works !
<div class="ui-dialog-titlebar...">
<span class="ui-dialog-title">
<span class="glyphicon glyphicon-info-sign"></span>Info title
</span>
...
</div>
<div id="1">
But, I will have multiple <span> with the class ui-dialog-title in my document and I want to access this <span> using the id of the next <div>.
I tried this :
$("#"+myId).prev("div").first("span").prepend('<span class="glyphicon glyphicon-info-sign"></span>');
But the glyphicon <span> was placed BEFORE ui-dialog-title <span> :
<div class="ui-dialog-titlebar...">
<span class="glyphicon glyphicon-info-sign"></span>
<span class="ui-dialog-title">Info title</span>
...
</div>
<div id="1">
I don't understand why it is placed here because with the other method, it works.
I hope you will understand my problem and thank you for your help !

You can do:
$("#"+myId).prev("div").find(".ui-dialog-title").prepend('<span class="glyphicon glyphicon-info-sign"></span>');
Working example
Structure:
<div class="ui-dialog-titlebar">
<span class="ui-dialog-title"><span class="glyphicon glyphicon-info-sign"></span>Info title</span>
</div>

sliding box in wordpress

i want my site to have sliding box like [this site]
I can do this by having a text widget and setting the position attribute to fixed.But it will not slide down.Do I have to use Javascript here?
Thanks
here is my code
<div id="primary" class="widget-area" role="complementary">
<ul class="xoxo">
<li id="text-4" class="widget-container widget_text"> <div class="textwidget"><table border="0">
<tbody>
<tr>
<td>
<p style="text-align: center">
<a href="http://nwfighting.com/files/2013/01/jiujitsuofferclean.png">
<img class="alignright size-full wp-image-4449" title="jiujitsuoffer" src="http://nwfighting.com/files/2013/01/jiujitsuofferclean.png" alt="" width="200" height="165" />
</a>
</p>
<p style="text-align: center"></p>
<p style="text-align: center">
<span style="font-size: 18px;color: #002aff">
<strong>
And Get a 2nd Video "Jiu Jitsu Fitness <BR>Secrets!"
</strong>
</span>
</p>
<p style="text-align: center">
<strong>
<span style="font-size: 16px">
And Ask About Our 30 Days Free Offer!
</span>
</strong>
</p>
<p>
<p>
<p style="text-align: center">
<strong>
<span style="font-size: 18px">
-Enter Your Info Here to Get Your Free Video-
</span>
</strong>
</p>
</p>
</p>
</td>
</tr>
<td>
<script type="text/javascript" src="https://cn112.infusionsoft.com/app/form/iframe/323c5df08af18d52623818df2e915c02"></script>
</td>
</tr>
</tbody>
</table>
</div>
</li> </ul>
</div><!-- #primary .widget-area -->

The site actually uses a plugin that make use of Javascript.You can simply use this Script and get it done
http://wordpress.org/extend/plugins/strx-magic-floating-sidebar-maker/
Hope this would help