W3C Validation - Attribute buttonindex not allowed on element a at this point - javascript

I getting the error "Attribute buttonindex not allowed on element a at this point". My code is
<p><a class="btn btn-success_ar hidden-xs" id="indexCarouselBeforeBtn2" buttonindex="2" role="button">HOVER HERE TO SEE BEFORE</a></p>
and my Script is
<script type="text/javascript" >
var imageList = [];
$(document).ready(function(){
var totalSlides = 5;
for (var i = 1; i <= totalSlides; i++) {
imageList[i] = [];
imageList[i][0] = $('<img />').attr('src', 'after/images/external/index' + i + 'after.jpg').attr('id', 'indexCarouselImg' + i);
imageList[i][1] = $('<img />').attr('src', 'after/images/external/index' + i + 'before.jpg').attr('id', 'indexCarouselImg' + i);
$("#indexCarouselBeforeBtn" + i).mouseenter(function(){
$("#indexCarouselImg" + $(this).attr('buttonindex')).remove();
$("#item" + $(this).attr('buttonindex')).append(imageList[$(this).attr('buttonindex')][1]);
$(this).addClass('btnHover');
});
$("#indexCarouselBeforeBtn" + i).mouseleave(function(){
$("#indexCarouselImg" + $(this).attr('buttonindex')).remove();
$("#item" + $(this).attr('buttonindex')).append(imageList[$(this).attr('buttonindex')][0]);
$(this).removeClass('btnHover');
});
$("#indexCarouselImg" + i).remove();
$("#item" + i).append(imageList[i][0]);
}
});
The error still exists even using P and Div tags instead of the a tag . How can I fix this.

I think that's attribute not exists in HTML.
You can use tabindex.
https://www.w3schools.com/tags/att_global_tabindex.asp

Related

Uncaught ReferenceError: is not defined at HTMLButtonElement.onclick

I have looked at other Questions of this type and none of them solved my problem. I am having this JavaScript code:
var count1;
for (count1 = 1; count1 < 11; count1++) {
var article = res.articles[count1]
var ImageURL = res.articles[count1].urlToImage
$('#showNews').append('<div id="' + count1 + '" class="article"><div class="overlayart"><div class="art"><h3>' + article.title + '</h3 <p>' + article.description + '<br><br><button onclick="divLoad()">Follow Link</button></p></div></div></div>');
$("#" + count1).css('background-image', 'url(' + ImageURL + ')');
x = article.url;
}
function divLoad() {
alert(article.url);
};
Basically there are 10 items with different articles. Scopes of variables are all correct. I can see the links of the items when I console log them in the loop. I want to alert each URL whenever each Item is clicked for a respected button. But when I click that I get the error:
Uncaught ReferenceError: divLoad is not defined
at HTMLButtonElement.onclick
Am I missing something?
EDIT [My Full Code]:
var x;
function divLoad() {
alert(x);
};
$(document).ready(function(){
var url = 'https://newsapi.org/v2/top-headlines?country='+country+'&apiKey=MYAPIKEY';
$.getJSON(url).then(function(res){
//console.log(res)
var count1;
for(count1 = 1; count1 < 11; count1++){
var article = res.articles[count1]
var ImageURL = res.articles[count1].urlToImage
x = article.url;
$('#showNews').append('<div id="'+count1+'" class="article"><div class="overlayart"><div class="art"><h3>'+article.title+'</h3><p>'+article.description+'<br><br><button onclick="divLoad()">Follow Link</button></p></div></div></div>');
$("#"+count1).css('background-image','url(' + ImageURL + ')');
}
});
The problem is that you're always referencing one single, global variable. That variable (x) will only ever hold the last value it was set to in your for loop.
Instead, we can append the articles and give each one a data attribute - that way, we can associate each element with a specific article URL.
function divLoad(url) {
alert(url);
};
$(document).ready(function() {
var url = 'https://newsapi.org/v2/top-headlines?country=' + "test" + '&apiKey=MYAPIKEY';
$.getJSON(url).then(function(res) {
for (let count1 = 1; count1 < 11; count1++) {
let article = res.articles[count1];
$('#showNews').append('<div id="' + count1 + '" class="article"><div class="overlayart"><div class="art"><h3>' + article.title + '</h3><p>' + article.description + '<br><br><button class="article-btn">Follow Link</button></p></div></div></div>');
$("#" + count1)
.css("background-image", "url('" + article.urlToImage + "'")
.attr("data-url", article.url); //Associate the URL to the element
}
});
$("#showNews").on("click", ".article-btn", function() {
var url = $(this).closest(".article").attr("data-url"); //Get the associated URL
divLoad(url);
});
});
If you inspect the <div class="article"> now, you'll see each one has a data-url attribute that holds its URL.

Hiding elements with JS

UPDATE:
I changed my script to this and it works. Way simpler and it works.
function myFunction(valor) {
var elementos = document.getElementsByClassName("inner");
var i;
for (i = 1; i < elementos.length+1; i++) {
document.getElementById("age"+i).style.visibility = "hidden";
}
document.getElementById("age"+valor).style.visibility = "visible";
}
I have this script:
function myFunction(valor) {
alert("Has seleccionado " + valor);
var elementos = document.getElementsByClassName("inner");
//alert ("Tienes " + elementos.length + " elementos.");
var i;
for (i = 1; i < elementos.length + 1; i++) {
var sty = document.getElementById("age" + i);
//alert("age"+i);
if (getComputedStyle(sty).getPropertyValue("visibility") == "hidden") {
document.getElementById("age" + valor).style.visibility = "visible";
} else {
document.getElementById("age" + i).style.visibility = "hidden";
}
}
}
That I control with a slider control. What I'm doing is hiding or showing some divs with depending of what I choose from the slider.
This is how I paint my data before trying to hide or shsow elements with the slider:
$(window).load(function() {
$.getJSON('http://xxxxx/xxxxx.json', function(data) {
var output = "<ul class='lista'><div class='outer'>";
for (var i in data.lbclassic) {
output += "<div style='visibility:hidden;' class='inner'id=" + "age" + data.lbclassic[i].ageinweeks + ">" + "<p>" + data.lbclassic[i].ageinweeks + "--" + data.lbclassic[i].cumul + "--" + data.lbclassic[i].perhh + "--" + data.lbclassic[i].perhd + "--" + data.lbclassic[i].eggweightinweek + "--" + data.lbclassic[i].eggmasscumul1 + "--" + data.lbclassic[i].eggmassinweek + "--" + data.lbclassic[i].eggmasscumul + "</p></div>";
}
output += "</div></ul>";
document.getElementById("placeholder").innerHTML = output;
});
});
This works great until one point - once I get to the last element (90 in this case), it won't show up.
Isn't it more easy to use the css "display:none;" feature for hidding your element.
.yourclass{
display:none;
}
just edit the class with js
Link to CSS
function myFunction(valor) {
var elementos = document.getElementsByClassName("inner");
var i;
for (i = 1; i < elementos.length+1; i++) {
document.getElementById("age"+i).style.visibility = "hidden";
}
document.getElementById("age"+valor).style.visibility = "visible";
}

append dynamic 'div's inside dynamic 'div's using dynamic id

I create 110 dynamic div, and 11 container dynamic div, each 10 div of 110 I put them in One container dynamic div 11, then I append the first div of 11 to div that has "allEl" id, this is my code:
var index = 0;
var divContener;
for (i = 0; i < 110; i++) {
if (i % 9 == 0) {
index++;
alert(index);
divContener = $("<div> </div");
divContener.attr('id', 'd' + index);
}
$('#d' + index).append("<div id='" + i + "'><a href=''><img src='" + smallImageArray[i] + "'/></a></div>");
$('#' + i).append("</br> Rate);
}
document.getElementById("#allEl").innerHTML = $("#d" + 1);
<div id="allEl">
<h1 id="carsCategory">All Cars</h1>
</div>
the problem is that the container div doesn't append to div that has "allEl" id,
What is the problem?
Try this:
<div id="allEl">
<h1 id="carsCategory">All Cars</h1>
</div>
<script src="js/jquery.min.js"></script>
<script>
var index = 0;
var divContener;
var allElem=$("#allEl");
for (var i = 0; i < 110; i++) {
if (i % 9 == 0) {
index++;
divContener = $("<div></div>");
divContener.attr('id', 'd' + index);
allElem.append(divContener);
}
$('#d' + index).append("<div id='" + i + "'><a href=''><img src='" + smallImageArray[i] + "'/></a></div>");
$('#' + i).append("</br> Rate");
}
allElem.append($("#d" + 1));
</script>
I hope this is what you were trying to achieve..

Autoincrement li tags generated by a javascript function

I have this function who parses an xml file:
<ul id="flussi">
<script type="text/javascript">
xmlDoc=loadXMLDoc("FLUSSI.xml") // Path to the XML file;
var M = xmlDoc.getElementsByTagName("ROAD");
for (i=0;i<M.length;i++){
//document.write("<div id='id'>"+xmlDoc.getElementsByTagName("ID")[i].childNodes[0].nodeValue+"</div>");
document.write("<li>"+xmlDoc.getElementsByTagName("NAME")[i].childNodes[0].nodeValue+ "</li>");
document.write("<li>"+xmlDoc.getElementsByTagName("SIM")[i].childNodes[0].nodeValue+ "</li>");
document.write("<li>"+xmlDoc.getElementsByTagName("REAL")[i].childNodes[0].nodeValue+ "</li>");
document.write("<li>"+ xmlDoc.getElementsByTagName("DIFF")[i].childNodes[0].nodeValue+"--"+"</li>");
}
</script>
</ul>
That writes on an html file a list of values like these:
<li> Ponte_Nuovo_sx</li>
<li>87</li>
<li>72</li>
<li>15--</li>
Now I want to autoincrement the li tag, but still I try to find a solution.
In the case the li tags aren't generated by a function, and so if they are static, I can increment the li tag.
What I want to obtain is that (if it's possible):
<li id=1> Ponte_Nuovo_sx </li>
<ii id=2> 87 </li>
and so on.
// Have this run after it's been written to the document
$(function() {
$('ul li').each(function() {
$(this).attr('id', ($(this).index() + 1));
});
});
Note that this could probably and should be run through php, python or equivalent instead.
Otherwise you can simply handle an increasing value and given in Anubhab's answer.
can't you do like this:
var count=0;
for (i=0;i<M.length;i++){
//document.write("<div id='id'>"+xmlDoc.getElementsByTagName("ID")[i].childNodes[0].nodeValue+"</div>");
document.write("<li id="+count+">"+xmlDoc.getElementsByTagName("NAME")[i].childNodes[0].nodeValue+ "</li>");
count++;
document.write("<li id="+count+">"+xmlDoc.getElementsByTagName("SIM")[i].childNodes[0].nodeValue+ "</li>");
count++;
//and so on
}
Just for the record, that's what I meant :
JS
xmlDoc = loadXMLDoc("FLUSSI.xml") // Path to the XML file;
var M = xmlDoc.getElementsByTagName("ROAD");
var t_name = xmlDoc.getElementsByTagName("NAME");
var t_sim = xmlDoc.getElementsByTagName("SIM");
var t_real = xmlDoc.getElementsByTagName("REAL");
var t_diff = xmlDoc.getElementsByTagName("DIFF");
for (i = 0; i < M.length; i++) {
//document.write("<div id='id'>"+xmlDoc.getElementsByTagName("ID")[i].childNodes[0].nodeValue+"</div>");
document.write('<li class="name" id="name_' + i + '">' + t_name[i].childNodes[0].nodeValue + '</li>'
+ '<li class="sim" id="sim_' + i + '>' + t_sim[i].childNodes[0].nodeValue + '</li>'
+ '<li class="real" id="real_' + i + '>' + t_real[i].childNodes[0].nodeValue + '</li>'
+ '<li class="diff" id="diff_' + i + '>' + t_diff[i].childNodes[0].nodeValue + '--</li>');
}
CSS
li.name{
}
li.sim{
}
li.real{
}
li.diff{
}
li#name_1{
}
/** Only with CSS3 compliant browsers **/
li.name:nth-child(2n)
{
/** Only pair child, works with numbers to to target single element but faster to use ID then. **/
}

remove array using jquery

I have created nestled arrays, which I then append to a div. When i click the button with id "name", a movie with title is stored in an array $titelBetyg, which is later stored in another array $films. Whenever i create a new $titelBetyg, i want to remove the previous $films from my div, before replacing it with the new one. How do I do this?
Javascript
$(document).ready(function(){
var $films = [];
$('#name').keyup(function(){
$('#name').css('background-color', 'white');
});
$('#options').change(function(){
$('#options').css('background-color', 'white');
});
$("#button").click(function(){
var $titelBetyg = [];
var $titel = $('#name').val();
var $betyg = $('#options').val();
if($titel == ""){
$('#name').css('background-color', 'red');
alert("Fail");
}
else if($betyg == "0"){
$('#options').css('background-color', 'red');
alert("Fail");
}
else{
$titelBetyg.push($titel);
$titelBetyg.push($betyg);
$films.push($titelBetyg);
// here is where i need to remove it before appending the new one
$('#rightbar').append("<ul>");
for(i=0; i<$films.length; i++){
$('#rightbar').append("<li>" + $films[i][0] + " " + $films[i][1] + "</li>" + "<br>");
}
$('#rightbar').append("</ul>");
}
});
$('#stigande').click(function(a,b){
});
$('#fallande').click(function(){
});
});
Use .empty() like this (and append to the <ul> instead of something else):
var $ul = $("<ul>");
for (var i=0; i<$films.length; i++) {
$ul.append("<li>" + $films[i][0] + " " + $films[i][1] + "</li><br>");
}
$('#rightbar').empty().append($ul);
Btw, it might be easier to only append the new one instead of emptying and rebuilding the whole thing:
$('#rightbar ul').append("<li>" + $titel + " " + $betyg + "</li><br>");
To remove only the list contents (and nothing else) from the #rightbar, you could use this:
var $ul = $('#rightbar ul').empty();
if (!$ul.length) // if nonexistent…
$ul = $("<ul>").appendTo('#rightbar'); // create new one
for (var i=0; i<$films.length; i++)
$ul.append("<li>" + $films[i][0] + " " + $films[i][1] + "</li>");
document.getElementById('rightbar').innerHTML = '';
That way rightbar is totally empty.
You only require to remove the content of the container. So, use the .empty() function
$('#rightbar').empty().append("<ul>"); //It will empty the content and then append
for(i=0; i<$films.length; i++){
$('#rightbar').append("<li>" + $films[i][0] + " " + $films[i][1] + "</li>" + "<br>");
}
$('#rightbar').append("</ul>");

Categories

Resources