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 7 years ago.
Improve this question
I trying use the Javascript DOM. I need get a information (data-content), searching by class.
The html of website is:
<li class="item info-icon info-icon-phone">
<strong itemprop="telephone" class="phone-place js-expansible-text js-phone-tracker display-phone_ad" data-content="(19) 3879-1066 / (19) 3879-1066" data-style_class="clickable" data-place_id="76588JTY">(19) 3879-1066 / (19) 3879-1066</strong>
</li>
My code doesn't works:
var script = document.getElementsByClass('phone-place js-expansible-text js-phone-tracker display-phone_ad');
var script = document.getElementsByClassName('phone-place js-expansible-text js-phone-tracker display-phone_ad');
http://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp
I believe the function you are looking for is getElementsByClassName.
What do querySelectorAll, getElementsByClassName and other getElementsBy* methods return?
You can retrieve element attributes using the getAttribute() method.
In this instance you could use the following to get the data-content attributes:
var elements = document.getElementsByClassName('phone-place js-expansible-text js-phone-tracker display-phone_ad');
var dataContent = elements[0].getAttribute('data-content');
getElementsByClassName returns an array of matching elements, you could replace this with getElementByClassName with returns a single element, this is preferable if you're only expecting one element. In my example you will see you need to reference the first element in the array elements[0] before calling getAttribute()
Instead with getElementByClassName do the following:
var element = document.getElementByClassName('phone-place js-expansible-text js-phone-tracker display-phone_ad');
var dataContent = element.getAttribute('data-content');
A quick bin to show this in action
Related
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 5 years ago.
Improve this question
I am trying to get form data in jQuery, I have tried two following methods:
var form = document.getElementById('user_form'); //By using form id
var form = document.getElementsByTagName('form'); //By form tag name
the first one gives me the result in the following format:
<form id="user_form" action="/users/create_user" method="post">
// ...
</form>
which is ok, but when I try the second method then it returns me the result in the form of object.
[form#user_form, user_form: form#user_form]
but I am looking for the result in the same format which 1st method returns.
getElementsByTagName returns a list of nodes which satisties that tag name.
You can apply indexing to get a single element.
var forms = document.getElementsByTagName('form'); //By form tag name
var form = forms[0];
You can easily use jquery selector to access the node you want with just indexing. Here is an example with vanilla and jquery:
var htmlFormById = $("#user_form")[0];
console.log("htmlFormById",htmlFormById);
var htmlFormByTag = $("form")[0];
console.log("htmlFormByTag",htmlFormByTag);
var formById = document.getElementById('user_form');
console.log(formById);
var formByTag = document.getElementsByTagName('form')[0];
console.log(formByTag);
Here is a working solution in the fiddle: https://jsfiddle.net/toc3ej6s/1/
var InnerHtml = document.getElementById("wrapper").innerHTML
InnerHtml = serialize(document.forms[0]); //Serialized Form Data
Found That on this one JavaScript Form serialized
Hope this Helps.
The getElementsByTagName() method returns a collection of all elements in the document with the specified tag name
document.getElementsByTagName('form')
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 6 years ago.
Improve this question
I'm sure this is super easy, but I want to run a jquery/javascript script to return an array of all URLs on a page v which contains the '601' within it.
You can use the selector a[href*='601'] to get each element which href contains the text "601". For putting them in array you can use .each() and then push() the href attributes:
var arr = [];
$("a[href*='601']").each(function(){
arr.push($(this).attr('href'));
})
console.log(arr);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="link" href="xxxx.com/6012342342/example"></a>
<a class="link" href="xxxx.com/2342342/example"></a>
<a class="link" href="xxxx.com/2342342/example601"></a>
<a class="link" href="xxxx.com/6012342342/601example"></a>
<a class="link" href="xxxx.com/foo/example"></a>
var items = $("[href*=601]").map(function(){return $(this).attr('href')})
Use filter() to filter your array with all urls. And includes() to determine if the URL contains "601".
var urls = ['example.com','example.com/601'];
var filtered = urls.filter(function(url){
return url.includes("601");
});
Example
Edit:
Sorry I didn't see you also want do get all link elements first.
var urls = [];
$("a").each(function() {
urls.push(this.href)
})
Then you could use my first method or directly use.
var filtered = [];
$("a").each(function() {
var url = this.href
if (url.includes("601")) {
filtered.push(url)
}
})
Example
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
Here is a code...
<div id="d1">
<ol>
<li id="li1"></li>
<li id="li2"></li>
</ol>
<div>
<script>
var dod = document.getElementById("d1");
var foo = dod.getElementsByTagName("*");
for(i=0;i<foo.length;i++){
console.log(foo[i].id);
}
</script>
How can I put commas between Id's?
Let's have some fun:
console.log(Array.prototype.map.call(document.querySelectorAll("#d1 *"), function(e) {
return e.id;
}).join(", "));
This was originally meant to be a bit of a joke, but it has a core of seriousness to it and demonstrates some handy things:
document.querySelectorAll will give you a (disconnected) NodeList of elements matching a CSS selector. So #d1 * gives us all of the descendant elements of #d1.
Array.prototype.map is happy to be used on anything array-like, it doesn't require that you use it on an actual array.
Function#call lets you call a function and tell it what this during the function call should be. So Array.prototype.map.call(document.querySelectorAll("#d1 *"), ... calls map making it use the NodeList from querySelectorAll as this.
Array.prototype.map calls the function you give it once for each "array" element, passing in the element, and building a new array from what you return. So our callback that returns e.id tells it to build an array of id values.
Array.prototype.join builds a string from the array elements, using the string you give it as the separator between them.
...and you know from your own code that console.log outputs it.
But looking at your HTML, we need to tweak it to only elements that actually have id values, or we'll end up with a lot of blanks in the result. That's easily done, we just add filter:
console.log(Array.prototype.filter.call(document.querySelectorAll("#d1 [id]"), function(e) {
return e.id !== "";
}).map(function(e) { return e.id; }).join(", "));
Two changes there:
I used #d1 [id] for the selector so we only got back elements with anid attribute.
I added a call to .filter before .map to filter out elements that have an id attribute, but with a blank value (sadly, no way to filter those out in CSS, e.g., defending against <li id="">).
Example
one way would be this:
var separator = ", ";
for(i=0;i<foo.length;i++){
if(i == foo.length - 1) {
separator = "";
}
console.log(foo[i].id + separator);
}
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 have created a dynamic textbox but unable to fetch its value on runtime. it shows something else.
code
var UL = document.createElement('ul');
var Li = document.createElement('li');
var A4 = document.createElement('input');
A4.type = 'text';
A4.setAttribute('id', 'current_page');
A4.value = list.length;
A4.setAttribute('style', 'width:30px;height:26px;text-align:center;position:relative;left:35px');
Li.appendChild(A4);
UL.appendChild(Li);
script
var va = $('#current_page').val;
alert(va);
Seeing as you're using JavaScript for everything else, save the jQuery for another day:
var va = document.getElementById('current_page').value;
In jQuery you need to use .val(); instead of .val;
var va = $('#current_page').val();
alert(va);
It doesn't look like you're ever appending anything to the document.
You need to use $('#current_page').val(); to get the value
For future reference can check if your selectors are finding anything using:
console.log($('#current_page'));
Use .val() in jQuery and it is a function
var val = $('#current_page').val();
alert(val);
Using Native JavaScript, You can use document.getElementById
alert(document.getElementById('current_page').value)
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Improve this question
I am creating a random fact generator which will be written inside a <p> tag. I followed every tutorial there is and I don't see where is the problem. The function is being summoned normally (i check that with alert).
Here is the code:
HTML:
<p id="rfact" name="rndfact">random fact goes here</p>
JS:
function rfact(){
var nrfact=Math.floor(Math.random()*2)
alert(nrfact);
if (nrfact==0) document.getElementByName("rndfact").innerHTML="random fact1";
if (nrfact==1) document.getElementByName("rndfact").innerHTML="random fact2";
if (nrfact==2) document.getElementByName("rndfact").innerHTML="random fact3";
}
Your problem is that there is no function called getElementByName on document.
You want one of these:
document.getElementById('rfact');
document.getElementsByName('rndfact')[0] // notice the plural
You are using a method that does not exist. There is not such method as getElementByName.
Use either document.getElementsByName (note the plural in elements, you'll get an array), or document.getElementById (which is the right way to do it).
Solution: http://jsfiddle.net/P7wev/
Use getElementById, since the getElementByName you supplied in doesn't exist nor does the name attribute inside the P tag.
function rfact(){
var nrfact=Math.floor(Math.random()*2);
alert(nrfact);
if (nrfact==0) document.getElementById("rfact").innerHTML="random fact1";
if (nrfact==1) document.getElementById("rfact").innerHTML="random fact2";
if (nrfact==2) document.getElementById("rfact").innerHTML="random fact3";
}
Use document.getElementById("rfact").innerHTML=... instead.
this should work for ya.
<script type="text/javascript">
window.onload=function(){
rfact();
function rfact(){
var nrfact=Math.floor(Math.random()*2)
alert(nrfact);
if (nrfact==0) document.getElementById("rfact").innerHTML="random fact1";
if (nrfact==1) document.getElementById("rfact").innerHTML="random fact2";
if (nrfact==2) document.getElementById("rfact").innerHTML="random fact3";
}
}
</script>
HTML --> id="rndfact"
<p id="rndfact" name="rndfact">random fact goes here</p>
JS --> getElementById
function rfact() {
var nrfact = Math.floor(Math.random() * 3);
if (nrfact == 0) document.getElementById("rndfact").innerHTML = "random fact1";
if (nrfact == 1) document.getElementById("rndfact").innerHTML = "random fact2";
if (nrfact == 2) document.getElementById("rndfact").innerHTML = "random fact3";
}
rfact()
Use getElementById or use getElementsByName[0]
You have an id set use that instead. getElementsByName returns an array, you have to access the return as such, by using the array notation before accessing the properties like innerHTML
Using getElementById
function rfact(){
var nrfact=Math.floor(Math.random()*3)
alert(nrfact);
var element = document.getElementById("rfact");
if (nrfact==0) element.innerHTML="random fact1";
if (nrfact==1) element.innerHTML="random fact2";
if (nrfact==2) element.innerHTML="random fact3";
}
Using getElementsByName
function rfact(){
var nrfact=Math.floor(Math.random()*3)
var elements = document.getElementsByName("rndfact");
if (nrfact==0) elements[0].innerHTML="random fact1";
if (nrfact==1) elements[0].innerHTML="random fact2";
if (nrfact==2) elements[0].innerHTML="random fact3";
}
And use 3 instead of 2 in the formula to allow up to 3 facts.