i got a null object when i try to fetch an element by id using prototype's $ function, and got this strange behaviour:
document.observe('dom:loaded', function() {
$$('.answer').each(function(answer) {
console.log('answer.id: ' + answer.id);
console.log('$(answer.id): ' + $(answer.id)); # works, so the element does exists
console.log("$('answer_73'): " + $('answer_73')); # this doesn't, why?..
console.log(' ');
});
});
the divs are like this:
<div id="answer_73" class="answer"> ...
and there's no markup error
the logs:
....
answer.id: answer_73
$(answer.id): [object HTMLDivElement]
$('answer_73'): null
....
updated
sorry for all, finally i found what't gone wrong.. it's simply a type:
<div class="answer" id="answer_<%= answer.id %> "
it's the trailing whitespace which cause this 'strange' behaviour. maybe the prototype lib strips the trailig id when returning an object's id so the error didn't occur in the first case.
I'll bet you a beer that you have two elements with the id answer_73 in your document.
It works for me (Firefox 3.5, latest prototype.js):
<html><head><title></title>
<script src="prototype.js"></script>
<script>
function _debug (msg) {
document.body.innerHTML += "<p>"+msg+"</p>";
}
document.observe('dom:loaded', function() {
$$('.answer').each(function(answer) {
_debug("inside each, .id: "+answer.id); // works
_debug("inside each, byId .id: "+document.getElementById(answer.id));
});
_debug("outside each, byId literal: "+document.getElementById('answer_73'));
});
</script>
</head><body>
<div id="answer_72" class="answer"></div>
<div id="answer_73" class="answer">foo</div>
<div id="answer_74" class="answer"></div>
</body></html>
results in
foo
inside each, .id: answer_72
inside each, byId .id: [object
HTMLDivElement]
inside each, .id: answer_73
inside each, byId .id: [object
HTMLDivElement]
inside each, .id: answer_74
inside each, byId .id: [object
HTMLDivElement]
outside each, byId literal: [object
HTMLDivElement]
You're in documents's scope there. I'd also suggest you to use Firebug's console.log() function instead of alert() for debugging, then edit your topic.
Related
function brands(id)
{
var brand_id = $("#brands").val(id); //id is also getting here
alert(brand_id); // but not show in the alert box
}
why to show the the localhost say [object][object] there are no any result getting to me.
$("#brands").val(id)
You are assigning value and not reading value from it, also.val(<with param>) returns jQuery's object for the given DOM element, hence when you use alert() you get [object object]. Use brand_id.val(), you will get the expected results.
$(function() {
var v1 = $('#t1').val('hi');
alert(v1); /* jquery object */
alert(v1.val()); /* actual value */
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="t1" />
I have a very simple HTML page and I try to execute a simple CSS selector, using cheerio.
const $ = cheerio.load(html);
console.log($(`body > div > div.-layout-h > div.task-tests--label`).text());
Result:
Input:Output: Expected Output:Console Output:
My goal is to get the first element and print out its inner text. I have also tried iterating over the selected elements with each():
const $ = cheerio.load(html);
$(`body > div > div.-layout-h > div.task-tests--label`).each((i, e) => {
console.log(`${i} = ${e.text()}`);
});
Result:
0 = [object Object]
1 = [object Object]
2 = [object Object]
3 = [object Object]
How do I print the inner text of every selected item?
if you want to show clicked element text you should use this for understanding see this example
$('#change').click(function () {
$(this).text('this text changed');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="change">hello world</button>
Add the below tag to you head section.
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
You can also use
console.log($(`.task-tests--label`).text());
to make your life easier. The above code will select all the tags with class "task-tests--label" and console out their respective text.
I want to hide a button when the string "wholesale' is present in the url. I've tried a few variations of the following code but it just won't work.
<script type="text/javascript">
$(document).ready(function () {
if (/wholesale/.test(window.location.href)) {
document.getElementsByClassName('variations_button')[0].style.display = 'none';
}
});
</script>
May be this will help.
var patt = new RegExp("wholesale");
if (patt.test(window.location.href)) {
$('.variations_button').hide();
}
you are doing wrong with the select element by class name code
it should be like this:
document.getElementsByClassName('variations_button')[0].style.display='none'
Note:
document.getElementsByClassName returns an array of elements with the same class name. So document.getElementsByClassName('variations_button')[0] will return the first element with the class name variations_button.
you have a problem with getElementByClassName, it should be getElementsByClassName and will return a HTMLCollection (Array like object) not an element. You should probably also use jQuery if that is already loaded on the page. jQuery is an array like object of HTMLElements that will give you methods that will run over the entire collection.
edit:
here is a working example, click 'Run code snippet' to see the result. I had to change the regex to match what was in the snippet, but you should get the idea.
console.log( 'is jQuery installed on the page', typeof $ !== void 0 );
$(function () {
console.log( 'href', window.location.href );
if (/stacksnippets/.test(window.location.href)) {
console.log('regex found in href');
$('.variations_button').css('background', '#3cf');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://codepen.io/synthet1c/pen/WrQapG.js"></script>
<button class="variations_button">variations button</button>
I am attempting to loop over the whateverDivand find the offset of each element. I am getting the error message Uncaught TypeError: undefined is not a function, I suspect because .offset() cannot be called on the element. This brings me to the question of how I can call functions, such as .offset() and .is(":hover") on elements in an array like this.
whateverDiv = document.getElementsByClassName('whatever')
//RETURNS SOMETHING LIKE [<img src="http://www.whateversource.jpg">,<img src="http://www.whateversource2.jpg">]
for (i in whateverDiv){
console.log(whateverDiv[i].offset())
}
Assuming you have jquery included
whateverDiv = document.getElementsByClassName('whatever')
//RETURNS SOMETHING LIKE [<img src="http://www.whateversource.jpg">,<img src="http://www.whateversource2.jpg">]
for (i in whateverDiv){
var $div = $(whateverDiv[i])
console.log($div.offset())
}
And as others mentioned, you shouldn't use for in, but rather the standard for construction. However, if you're using jQuery already you might as well drink the koolaide and use their .each
http://api.jquery.com/each/
$(".whatever").each(function() {
console.log( $(this).offset() );
});
You've coded your loop with a combination of both types of for loop.
for (i in whateverDiv) {
// 'i' is each element
}
vs.
for (var i = 0; i < whateverDiv.length; i++) {
// 'i' can be used as an index of the 'whateverDiv' collection
}
However, as has been stated in the comments, your best bet is to use all jQuery, since the objects inside the loop will still need to be converted to a jQuery object to use those functions.
$('.whateverDiv').each(function () {
console.log($(this).offset());
});
You could use a jQuery loop:
$('.whatever').each(function(index, value) {
console.log('Item: ' + index + ' - element: ' + $(value).text());
// you could call a function like this on each element:
// yourFunction($(value));
// or a function of the jQuery element -> $(value).offset();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="whatever">
item one
</div>
<div class="whatever">
item two
</div>
<div class="whatever">
item three
</div>
<div class="whatever">
item four
</div>
<div class="whatever">
item five
</div>
let's say I have the following code:
var cont = <div id="foo">
imgSection.find('video').each(function(_ind)
{
cont.append('<div class="fullScreenBg"> '+ $(this) +' </div>');
});
which results in:
<div id="foo">
<div class="fullScreenBg"> [object Object] </div>
</div>
But I actually want do display the html of the Object/Video. When I use instead:
$(this).html()
I get pretty close, but it shows, as expected, only the innerHtml of the videoTag.
So how do I do this right?
You need to wrap the video element in the div and append the object. The issue at the moment is that you are appending the object as a string which is causing the object to string conversion, resulting in [object Object].
imgSection.find('video').each(function(_ind) {
cont.append($(this).wrap('<div class="fullScreenBg"></div>').parent());
});
Alternatively, create DOM elements instead of using HTML:
var $parent = $('<div class="fullScreenBg" />');
$parent.append(this).appendTo(cont);