Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
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.
Closed 6 years ago.
Improve this question
I have the following in HTML code:
<section id="main-content">
<header>
<h1 id="page-title">Why Are There No Arab Democracies?</h1>
</header>
To retrieve the contents of page-title, I've tried to use, among others, the following:
document.getElementById("page-title")[0].InnerText
document.getElementsByTagName("h1")[0].getElementById("page-title")[0].InnerText
Each time I get an error.
[0] is used when you are grabbing multiple elements & you want to choose the first element from the list.
Eg: If your page has multiple <p> and you do a getElementByTagName('p') then you need to use [0] to access first element in the list of all captured elements.
<p>Hello</p><p>hi</p>
then
alert(document.getElementsByTagName("P")[0].innerHTML); ## this alerts "Hello"
Answer to your question:
alert(document.getElementById('page-title').innerHTML);
<section id="main-content">
<header>
<h1 id="page-title">Why Are There No Arab Democracies?</h1>
</header>
</section>
Use document.getElementById(); like this instead. You also should use .textContent to find the text of the element.
The reason you do not have to use [0] when finding elements by id is because getElementById returns one element because there should only be one element in your HTML with a named id.
alert(document.getElementById("page-title").textContent);
<section id="main-content">
<header>
<h1 id="page-title">Why Are There No Arab Democracies?</h1>
</header>
</section>
document.getElementById("page-title").innerText
you're only grabbing one element, so no need for the [0]
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
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.
Closed 5 years ago.
Improve this question
I don't know if this will be a duplicate, but I've tried multiple scripts (not just in jQuery, but also in Javascript) to try to get the job done. Here's the HTML:
<p id="text">
I will disappear!
</p>
<button id="togglebutton">
Go!
</button>
And jQuery:
$('#togglebutton').click(function() {
$('text').toggle('slow');
});
Click me to try the Fiddle
I hope you may be able to find a solution. Thanks :D
use #test instead of test to select an id attribute in jquery
$('#togglebutton').click(function() {
$('#text').toggle('slow');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="text">
I will disappear!
</p>
<button id="togglebutton">
Go!
</button>
Because you're selecting an ID, $('text') should be $('#text')
$('#togglebutton').click(function() {
$('#text').toggle('slow');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="text">
I will disappear!
</p>
<button id="togglebutton">
Go!
</button>
You're missing the # sign for the text attribute.
$('#togglebutton').click(function() {
$('#text').toggle('slow');
});
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
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.
Closed 6 years ago.
Improve this question
I am trying to display the data of a div tag on a href click, the id is dynamically made. But the div tag is not responding. The sequence of the code is as below. The file is the .tpl file.
function editPickUpAddress(divId)
{
("#pickupAddressForm_"+divId).show();
}
<a href style="float:right;margin-top:-20px;margin-right:100px;" onclick="editPickUpAddress({$item.profile_id});">Edit</a>
<div id="pickupAddressForm_{$item.profile_id}" style="display:none">
//some content to display
</div>
After cleaning up your snippet and including jQuery, the code works as intended. Also note the href="#" which prevents the anchor tag from navigating to another page.
function editPickUpAddress(divId) {
$("#pickupAddressForm_" + divId).show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Edit
<div id="pickupAddressForm_1" style="display:none">
//some content to display
</div>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
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.
Closed 6 years ago.
Improve this question
I am trying to clone a div without its value. Everything I've tried so far copies the value as well.
Here is my jQuery function
$('#add_more').click(function(){
$('#div_to_clone).clone().insertBefore('#add_more').find('input').val('');
});
This seems to be working fine for me:
$('#add_more').click(function() {
$('#div_to_clone').clone().insertBefore('#add_more').find('input').val('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="div_to_clone">
<input type="text" />
</div>
Add more
Well, I recommend you changing your id to a class since the value of id attribute should be unique throughout the page. You might be getting the issue in some browser due to duplicate id.
$('#add_more').click(function() {
$('.div_to_clone:first').clone().insertBefore('#add_more').find('input').val('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="div_to_clone">
<input type="text" />
</div>
Add more
Assuming that your html code is similar to this.
<div class="ContainerDiv">
<div id=ClonethisDiv><input class="InputTxtBox" type="text" /></div>
</div>
clone
Now,
$("body").on("click", "a", function() {
$("#ClonethisDiv").clone().appendTo(".ContainerDiv").find(".InputTxtBox").val("");
});
Hence on click, anchor tag u will able to get a copy of Div with Id='ClonethisDiv' and appended to the container Div.
Here while cloning(copy) input element with a class '.InputTxtBox', will be emptied and get copied. No worry! TextBox Values which already appended to container Div doesnot change.
Hope this will help you.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
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.
Closed 8 years ago.
Improve this question
I have following html structure
<a id="myBtn" class="ui-link">
<span class="number"> </span>
<span class="button "> </span>
</a>
I want dynamically to insert some content into <span class="number">
var content = 99;
$('number').html(content);
but nothing change.
So what I need to do insert value into span that resulted node looks like this
<span class="number">99</span>
You are not using . to get class selector. Use $('.number') instead of $('number')
$('.number').html(content);
OR
$('.number').text(content);
insert text using class
var content = 99;
$('.number').html(content);
Try this:
$('.number').html(content);
You are referring to a wrong element. You can also do this:
$('.number').text(content);
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
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.
Closed 8 years ago.
Improve this question
I have this "list":
<div class="list">
<div class="test" data-id="1"></div>
<div class="test" data-id="2"></div>
<div class="test" data-id="3"></div>
<div class="test" data-id="4"></div>
<div class="test" data-id="5"></div>
</div>
i need to get data attribute of all elements, so i do this:
var _this = $('.list'),
_el = _this.find('div');
var _id = $.map(_el, function(el) {
return {name: 'offer-id', value: $(el).data('id')}
});
but what i get is only attribute of first element... What is wrong? Fiddle: http://jsfiddle.net/4DRxz/
As per jQuery documentation, the map function will return you an array with the mapped elements. You can iterate over them if you need each one.
Like:
for(var i=0; i<_id.length; i++){
// do stuff with _id[i].value here
}
or by using $.each as suggested by another answer.
Updated fiddle