i want to change the color of button but i get this message with any method (style,innerHtml,...)
error: Uncaught TypeError: Cannot set property 'color' of undefined
html:
`
<div class="a-section backGround layer">
</div>
<div class="a-section layer">
<div class="a-row dealDetailContainer">
<div class="a-row a-spacing-mini">
<div class="a-row a-spacing-unspecified">
<span class="a-size-mini a-color-base hiddenCss"> </span>
<span class="a-size-mini a-color-base badgeSkew"></span>
</div>
</div>
<div class="a-row stackToBottom">
<div class="a-row a-spacing-medium">
<span class="a-declarative">
<span class="a-button a-button-normal a-button-span12 a-button-primary fixedWidth210">
<span class="a-button-inner">
<button class="a-button-text a-text-center" type="button">
Add to Cart
</button>
</span>
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
`
js:
var button = document.getElementsByClassName=(".a-button-primary .a-button-text");
var i;
for(i=0 ; i <= button.length ; i++){
button[i].style.color = "blue";
}
As noted in #Heretic's comment, your syntax is incorrect. Another issue I found is that you are looping beyond the length of the returned elements. In your for loop, you are using <= instead of <. Because we're starting at 0, <= will go too far and return undefined when the loop exceeds the actual element length.
Here is a basic example of what you're trying to do.
var button = document.getElementsByClassName("my-button");
for (var i = 0; i < button.length; i++) {
button[i].style.color = "blue";
}
<button class="my-button">hello</button>
<button class="my-button">hello</button>
<button class="my-button">hello</button>
Related
I'm trying to be able to onclick and select one of four buttons inside a div.
The div is one of five - so when i click i only want to check the exact button and the right div to be effected by the attribute changes
The buttons are nested inside the divs as shown here.
Can i use an eventhandler to confirm which div im clicking on and then use an if statement to control from there?
The final issue im having is that i want to push the innerHTML to an array to then check against but i keep getting undefined error
HTML..........
<div class="rightMain" id="q1box">
<div class="answerButtonBox">
<button type="button" class="answerButton" id="q1A" value="1">The Marauder</button>
</div>
<div class="answerButtonBox">
<button type="button" class="answerButton" id="q1B" value="2">The Black Pearl</button>
</div>
</div>
Typescript/JS....
var userGuess:[{}]; ///can i just initilize an array and then push the innerhtml into it?
var answers: [{}];
question1.addEventListener("click", checkq1)
function checkq1(){
if (first.onclick)
{
first.setAttribute("style", "background-color: yellow;")
second.setAttribute("style", "background-color: grey;")
third.setAttribute("style", "background-color: grey;")
fourth.setAttribute("style", "background-color: grey;")
userGuess.push(first.innerHTML)
}
if (second.onclick)
{
first.setAttribute("style", "background-color: grey;")
second.setAttribute("style", "background-color: yellow;")
third.setAttribute("style", "background-color: grey;")
fourth.setAttribute("style", "background-color: grey;")
userGuess.push(second.innerHTML)
}
etc.....
Any help would be appreciated!
the error im getting with respect to my array....
index.ts:59 Uncaught TypeError: Cannot read property 'toString' of undefined
at HTMLDivElement.checkq1 (index.ts:59)
You can get all not-selected answer and get css for it, hope it helps
const answerBtn = document.getElementsByClassName('answerButton');
for (var i = 0; i < answerBtn.length; i++) {
answerBtn[i].addEventListener('click', getAnswer, false);
}
function getAnswer() {
const selectAnswer = this;
selectAnswer.setAttribute('style', 'background-color: yellow;');
const parent = this.parentElement.parentElement;
const notSelectedAns = [];
for (i = 0; i < parent.children.length; i++) {
if (parent.children[i].firstElementChild !== selectAnswer) {
notSelectedAns.push(parent.children[i].firstElementChild);
}
}
for (i = 0; i < notSelectedAns.length; i++) {
notSelectedAns[i].setAttribute('style', 'background-color: grey;');
}
}
<div class="rightMain" id="q1box">
<div class="answerButtonBox">
<button type="button" class="answerButton" id="q1A" value="1">The Marauder</button>
</div>
<div class="answerButtonBox">
<button type="button" class="answerButton" id="q1B" value="2">The Black Pearl</button>
</div>
<div class="answerButtonBox">
<button type="button" class="answerButton" id="q1C" value="3">The Black Pearl</button>
</div>
<div class="answerButtonBox">
<button type="button" class="answerButton" id="q1D" value="4">The Black Pearl</button>
</div>
</div>
i have an onclick function that that calls a changeName function anytime a click event on that element happens.
function changeName() {
var frag = $('<span class="Name">change me</span>');
$( ".list" ).prepend(frag);
var x =[];
$('.ch-gname').each(function(index, obj)
{
x.push($(this).text());
for(i=0; i<x.length; i++) {
$('.Name').text(x[i]);}}});
$('#action').on('click', changeName);
HTML
<div>
<a href="#0" class="cb-pgcar"</a>
<span class="ch-gname">Greenhouse</span>
</div>
<div>
<a href="#0" class="cb-pgcar"</a>
<span class="ch-gname">tree house</span>
</div>
<div>
<a href="#0" class="cb-pgcar"</a>
<span class="ch-gname">light house</span>
</div>
<div class="list">
</div>
<div class="list">
</div>
<div class="list">
</div>
i want to able to change the text of the class Name to the text of class ch-gname. My function gives me only the last text text(lighthouse) for the three links.Any help please
The function changeName() has $('#action').on('click', changeName); but i do not see any element with id 'action'. Anyhow i've made necessary changes in order to make it work.
Added Action id to the elements
Changed the $('.Name').text(x[i]); to $('.Name')[i].innerHTML = x[i];
Look at the below example
function changeName() {
var frag = $('<span class="Name">change me</span>');
$(".list").prepend(frag);
var x = [];
$('.ch-gname').each(function(index, obj) {
x.push($(this).text());
});
for (i = 0; i < x.length; i++) {
$('.Name')[i].innerHTML = x[i];
}
}
$('#action').on('click', changeName);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<a href="#0" class="cb-pgcar" </a>
<span id="action" class="ch-gname">Greenhouse</span>
</div>
<div>
<a href="#0" class="cb-pgcar" </a>
<span id="action" class="ch-gname">tree house</span>
</div>
<div>
<a href="#0" class="cb-pgcar" </a>
<span id="action" class="ch-gname">light house</span>
</div>
<div class="list">
</div>
<div class="list">
</div>
<div class="list">
</div>
I dont understand why i am getting this Internal server error 500. Also because of the items aren't being hidden as i want them to. The console output is saying that the '$' isnt defined which isnt right i dont believe since i am link jquery.
HTML:
<template name="room">
<div class="container-fluid">
<h1> Sprint Retrospective</h1>
<form id="tagSearchForm" class="navbar-form navbar-right" role="search">
<div class="form-group">
<span><i class="fa fa-filter"></i></span>
<input id="filters" type="text" class="form-control" placeholder="Filter tags...">
</div>
<button id="filterTagsButton" type="button" class="btn btn-default">Filter</button>
</form>
{{> card}}
<hr>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-sm-6">
<h2> Good category </h2>
<ul class="fa-ul">
{{#each goodCards}}
<div class="row">
<div id="card" class="card-panel green">
<span class="white-text">
{{text}}
</span>
<div class="card-action">
<div class="chip">
<i id="deleteCardButton" class="material-icons fa fa-trash-o"></i>
Remove Card
</div>
{{#each tags}}
<div class="chip">
<tag class="tag" id="{{this}}">{{this}}</tag>
<i id="removeTag" class="material-icons fa fa-ban"></i>
</div>
{{/each}}
</div>
</div>
</div>
{{/each}}
</ul>
</div>
<div class="col-xs-6 col-sm-6">
<h2> Bad category </h2>
<ul class="fa-ul">
{{#each badCards}}
<div class="row">
<div id="card" class="card-panel red accent-4">
<span class="grey-text">
{{text}}
</span>
<div class="card-action">
<div class="chip">
<i id="deleteCardButton" class="material-icons fa fa-trash-o"></i>
Remove Card
</div>
{{#each tags}}
<div class="chip">
<tag class="tag" id="{{this}}">{{this}}</tag>
<i id="removeTag" class="material-icons fa fa-ban"></i>
</div>
{{/each}}
</div>
</div>
</div>
{{/each}}
</ul>
</div>
</div>
</div>
</div>
</template>
js:
Meteor.methods({
filterSingleTag: function(tag){
var numCards;
numCards = $(".card-panel").length;
for(var i = 0; i < numCards;i++){
var compTags;
var found;
found = false;
compTags = $(".card-panel").eq(i).find(".tag");
for(var j = 0; j < compTags.length; j++){
var str;
str = "" + compTags[j].firstChild;
if(str.toLowerCase() == tag){
found = true;
}
}
if(!found)
$(".card-panel").eq(i).hide();
}
},
filterMulitpleTags: function(tags){
var numCards;
numCards = $(".card-panel").length;
for(var i = 0; i < numCards;i++){
var compTags;
var found;
found = false;
compTags = $(".card-panel").eq(i).find(".tag");
for(var j = 0; j < compTags.length; j++){
var str;
str = "" + compTags[j].text;
if(tags.indexOf(str.toLowerCase()) >= 0)
found = true;
}
if(!found)
$(".card-panel").eq(i).hide();
}
},
clearFilter: function(){
var numCards;
numCards = $(".card-panel").length;
for(var i = 0; i < numCards;i++){
$(".card-panel").eq(i).show();
}
}
});
console:
Exception while invoking method 'filterSingleTag' ReferenceError: $ is not defined
I20160208-13:36:40.290(-6)? at [object Object].Meteor.methods.filterSingleTag (/home/thouse/Retrospectre/src/.meteor/local/build/programs/server/app/js/room.js:145:20)
I20160208-13:36:40.290(-6)? at maybeAuditArgumentChecks (/home/thouse/Retrospectre/src/.meteor/local/build/programs/server/packages/ddp-server.js:1785:12)
I20160208-13:36:40.291(-6)? at /home/thouse/Retrospectre/src/.meteor/local/build/programs/server/packages/ddp-server.js:872:20
I20160208-13:36:40.291(-6)? at [object Object]._.extend.withValue (/home/thouse/Retrospectre/src/.meteor/local/build/programs/server/packages/meteor.js:1021:17)
I20160208-13:36:40.291(-6)? at /home/thouse/Retrospectre/src/.meteor/local/build/programs/server/packages/ddp-server.js:871:41
I20160208-13:36:40.291(-6)? at [object Object]._.extend.withValue (/home/thouse/Retrospectre/src/.meteor/local/build/programs/server/packages/meteor.js:1021:17)
I20160208-13:36:40.291(-6)? at /home/thouse/Retrospectre/src/.meteor/local/build/programs/server/packages/ddp-server.js:870:46
I20160208-13:36:40.292(-6)? at tryCallTwo (/home/thouse/.meteor/packages/promise/.0.5.1.1550ocw++os+web.browser+web.cordova/npm/node_modules/meteor-promise/node_modules/promise/lib/core.js:45:5)
I20160208-13:36:40.292(-6)? at doResolve (/home/thouse/.meteor/packages/promise/.0.5.1.1550ocw++os+web.browser+web.cordova/npm/node_modules/meteor-promise/node_modules/promise/lib/core.js:171:13)
I20160208-13:36:40.292(-6)? at new Promise (/home/thouse/.meteor/packages/promise/.0.5.1.1550ocw++os+web.browser+web.cordova/npm/node_modules/meteor-promise/node_modules/promise/lib/core.js:65:3)
I20160208-13:36:40.293(-6)? at [object Object]._.extend.protocol_handlers.method (/home/thouse/Retrospectre/src/.meteor/local/build/programs/server/packages/ddp-server.js:848:21)
I20160208-13:36:40.293(-6)? at /home/thouse/Retrospectre/src/.meteor/local/build/programs/server/packages/ddp-server.js:729:85
Meteor methods are defined and executed on the server (also the client, depending on where they're defined). Since the server doesn't have access to jQuery, $ is undefined and it's throwing an error. It looks like you want to just execute some client-side code when something happens. In that case, you're looking for events:
In your client-side js code:
Template.yourTemplateName.events({
'click #filterTagsButton' (event, template) {
// Your stuff from your question goes here.
}
});
I can't tell which one is single versus multiple based on your example, but I think you can get the gist from here. I'd highly recommend reading the Meteor Guide for this kind of thing.
I have a jQuery code that looks for a specific div element.
If the element exist I define a variable and use parseFloat() function. Since there are going to be more than one element with the same class I've created an array.
So far I've managed to hide the element called: div.ifc-balance-div; however I am not quite sure how I can hide the div.ribbon-yellow, in case the element does not have the variable savePrice.
(function($) {
"use strict";
$(document).ready(function() {
var j = 0,
savePrices = jQuery('.special-price .price .price').map(function() {
return parseFloat(jQuery(this).text().replace(/[^0-9\.]+/g, ""), 10);
}).get();
if(j < savePrices.length){
++j;
}
for (var i = 0; i < savePrices.length; ++i) {
if (Number(savePrices[i]) > 0) {
var ifcBalance = Number(savePrices[i]) / 1,
m = parseFloat(ifcBalance).toFixed(0);
$('div.ifc-balance-div' + (i + 1)).html('<p class="dynamic-badge-txt"><b>£' + m + ' OFF</b></p>');
$('div.ribbon-yellow').html('<div class="badge-ends-message">ENDS TUESDAY</div>');
}
else {
$('div.ifc-balance-div' + (i + 1)).hide();
}
}
});
})(jQuery);
Here is a sample of the HTML Code:
one having Save Price:
Text
<div class="price-box">
<p class="old-price">
<span class="price-label">Was</span>
<span class="price" id="old-price-15510">
<span class="price"><span class="currency">£</span>599</span> </span>
</p>
<p class="special-price">
<span class="price-label">You Save</span>
<span class="price" id="price-excluding-tax-15510">
<span class="price"><span class="currency">£</span>300</span> </span>
</p>
</div>
From
£299
One without save price:
<div class="ribbon-yellow"></div>
<div>
</div></div></div>
<a href="#" title="#">
<img src="#" alt="#">
</a>
</div>
<div class="item__detail">
<a href="#" title="#" class="item__link">
<p class="product-name item__name">Text</p>
</a>
<div class="price-range">
<span class="price-label">From </span>
<span class="price"><span class="price"><span class="currency">£</span>299</span></span>
</div>
</div>
</div>
in the demo below, it orders li's according to text.
http://codepen.io/anon/pen/ByERqd
<abbr id="arti173" class="butarti">8</abbr>
I want to order li's according to the text in abbr.
I really appreciate your help.
I've been working on it lately and am stuck.
html
<body>
<input type="button" id="test" value="Sort List (click again to reverse)" />
<ul id="list">
<li>Peter<div class="yordivu">
<div>
<img>
</div>
<div> <button id="likefuncid173" class="likebutx mybutton" onclick="likefunc(173,1,'abbr#arti173')"><abbr id="arti173" class="butarti">6</abbr><span class="fa fa-thumbs-up"></span></button><button id="unlikefuncid173" class="mybutton" onclick="unlikefunc(173,1,'abbr#eksi173')"><abbr id="eksi173" class="buteksi">2</abbr><span class="fa fa-thumbs-down"></span></button>
</div>
</div>
<div style="word-wrap: break-word;">
<div><h3 class="yornameh"></h3><span class="text-muted"><strong></strong></span></div>
<div class="yortext">
</div>
</div></li>
<li>Mary<div class="yordivu">
<div>
<img>
</div>
<div> <button id="likefuncid173" class="likebutx mybutton" onclick="likefunc(173,1,'abbr#arti173')"><abbr id="arti173" class="butarti">8</abbr><span class="fa fa-thumbs-up"></span></button><button id="unlikefuncid173" class="mybutton" onclick="unlikefunc(173,1,'abbr#eksi173')"><abbr id="eksi173" class="buteksi">3</abbr><span class="fa fa-thumbs-down"></span></button>
</div>
</div>
<div style="word-wrap: break-word;">
<div><h3 class="yornameh"></h3><span class="text-muted"><strong></strong></span></div>
<div class="yortext">
</div>
</div></li>
<li>Paul<div class="yordivu">
<div>
<img>
</div>
<div> <button id="likefuncid173" class="likebutx mybutton" onclick="likefunc(173,1,'abbr#arti173')"><abbr id="arti173" class="butarti">5</abbr><span class="fa fa-thumbs-up"></span></button><button id="unlikefuncid173" class="mybutton" onclick="unlikefunc(173,1,'abbr#eksi173')"><abbr id="eksi173" class="buteksi">0</abbr><span class="fa fa-thumbs-down"></span></button>
</div>
</div>
<div style="word-wrap: break-word;">
<div><h3 class="yornameh"></h3><span class="text-muted"><strong></strong></span></div>
<div class="yortext">
</div>
</div></li>
<li>Allen<div class="yordivu">
<div>
<img>
</div>
<div> <button id="likefuncid173" class="likebutx mybutton" onclick="likefunc(173,1,'abbr#arti173')"><abbr id="arti173" class="butarti">1</abbr><span class="fa fa-thumbs-up"></span></button><button id="unlikefuncid173" class="mybutton" onclick="unlikefunc(173,1,'abbr#eksi173')"><abbr id="eksi173" class="buteksi">10</abbr><span class="fa fa-thumbs-down"></span></button>
</div>
</div>
<div style="word-wrap: break-word;">
<div><h3 class="yornameh"></h3><span class="text-muted"><strong></strong></span></div>
<div class="yortext">
</div>
</div></li>
</ul>
</body>
javascript
function sortUnorderedList(ul, sortDescending) {
if (typeof ul == "string") ul = document.getElementById(ul);
var lis = ul.getElementsByTagName("LI");
var vals = [];
for (var i = 0, l = lis.length; i < l; i++)
vals.push(lis[i].innerHTML);
vals.sort();
if (sortDescending) vals.reverse();
for (var i = 0, l = lis.length; i < l; i++)
lis[i].innerHTML = vals[i];
}
window.onload = function() {
var desc = false;
document.getElementById("test").onclick = function() {
sortUnorderedList("list", desc);
desc = !desc;
return false;
}
}
First of all, there should not be more than one id value in a document. Any kind of querying on that will fail then.
Coming to your issue, you can insert the text inside abbr in your array to be sorted along with li and then sort based on the text. Keeping that in mind, change your code to this -
for (var i = 0, l = lis.length; i < l; i++)
{
// pushing an array with text as second field
vals.push([lis[i].innerHTML, lis[i].getElementsByClassName("butarti")[0].innerHTML]);
}
// sorting the final based on text
vals.sort(function(a,b){return parseInt(a[1]) - parseInt(b[1])});
if (sortDescending) vals.reverse();
// replacing the existing li tags html
for (var i = 0, l = lis.length; i < l; i++)
lis[i].innerHTML = vals[i][0];
Hope this works.