use same local storage id multiple times on one page - javascript

is it possible to use/print the same local storage element multiple times on the same page?document.getElementById("searchOutput").innerHTML=localStorage.searchTerms;
i tried to collect a search term and output it multiple times on the same page, but it only shows up the first place
<div class="outputText">
<ul><li>You have searched <span id="numberClicks">0</span> times.</li>
<li>You have searched for <span id="searchOutput"> nothing yet</span>.</li></ul>
</div>
<div class="scroogleSearch">
<h2>News results for <span id="searchOutput"> </span></h2>
<h2><span id="searchOutput"></span> on Twitter - #<span id="searchOutput"> </span></h2>
<h2><span id="searchOutput"> </span> - Wikipedia, the free encyclopedia</h2>
</div>

You can only use a given id ONCE per web page.
To output something multiple times, you will either need to generate a unique id or use a class name on these elements. You can have multiple elements with a given class name.
By specification, document.getElementById() only returns one object so you can never use it to retrieve multiple objects.

Related

How to make html div embedable using JavaScript?

I want to provide simple web service and let anyone to embed it in any site using JavaScript.
The Service is to provide Visitor IP address for Static Websites or any one that wants to used JavaScript for showing IP address instead of Server-Side script.
my code is:
<div style="white-space:normal; display:inline-block;background-color:white">
Your IP Address is: <br><strong>
{ip}</strong><br>Country:{country}<br>
ISP:{isp}
</div>
Screen Shot:
I can use document.write() and output this content, but I am not sure if its the best choose, or using another method like appendChild to a parent element?
last note, should I enclose the script between window.onload()?
You could use good old VanillaJS. By just giving it an ID, then changing its innerHTML.. Its basically Javascript DOM. It changes the actual html Learn More here.
document.getElementById("IP").innerHTML = "XXX.XXXXX.XXXX";
document.getElementById("Country").innerHTML= "U.S.A";
document.getElementById("ISP").innerHTML= "ISP Name";
<div style="white-space:normal; display:inline-block;background-color:white">
Your IP Address is: <span id="IP"></span><br>
Country:<span id="Country">{country}</span><br>
ISP:<span id="ISP">{isp}</span><br>
</div>
So i get the id by doing the usual document.getElementById.. Then you can change its innerHTML By doing .innerHTML.
EDIT
Here is a codepen!
EDIT2
So now i understood you want to do this using document.write(); Well its going to be kinda tedious but this is preety much the overall result..:
<h1>Representation</h1>
<div style="white-space:normal; display:inline-block;background-color:white">
Your IP Address is: <span id="IP">
<script>
document.write("XXX.XXXXX.XXXX");
</script></span>
<br>Country:
<span id="Country"><script>
document.write("U.S.A");
</script></span>
<br>ISP:
<span id="ISP"><script>
document.write("ISP Name");
</script></span>
<br>
</div>

Showing only a few elements, others can navigate using the arrows

Good moorning.
I have got a variable $awards = array which contents some data from database from specific users. This variable extracts a set of awards to result set of users.
<div>
<span class="zoom-gallery" n:foreach="$awards as $award" n:if="$award['user_id'] == $solver['id']">
<a href="{$basePath}{$award['link']}">
<img src="{$basePath}{$award['preview']}"/>
</a>
</span>
</div>
However, some users have so much awards -> I would like to show first 4 awards between two arrows allowing going through the other.
Example: arrow_prev AWARD1 AWARD2 AWARD3 AWARD4 arrow_next
Could you help me how to do it? I know it's solvable through javascript but I dont know javascrip much (beginner). Or - does exist some plugin? Thank you

Duplicate id of children of an element. is it good practise? [duplicate]

This question already has answers here:
Can multiple different HTML elements have the same ID if they're different elements?
(17 answers)
Closed 8 years ago.
I have so many children, in an element, So to avoid of maintaining multiple ids, I have used same ids
ex
<div id="1" class="userstatus">
<div class="floatl userdetails">
<span id="name" class="ellips">aravi</span>
</div>
<div id="scode" class="status status-1"></div>
</div>
<div id="2" class="userstatus">
<div class="floatl userdetails">
<span id="name" class="ellips">aravi</span>
</div>
<div id="scode" class="status status-1"></div>
</div>
Here I have duplicated name, scode ids for innerElements of 1, 2. I can able to
I can able to get the name by using querySelector api. am I doing right way?
You should never use duplicate ids - id should be unique per document.
If you need multiple elements with the same "tag" use classes.
I would recommend you read: http://css-tricks.com/the-difference-between-id-and-class/
Think of it like:
You have on your ID card an id number that is unique to you, no one else has it.
But you are part of the class of people who post Questions on SO, and obviously there are more of us.
By definition ID's should describe one element in the DOM uniquely. Also, semantics is compromisied by using multiple ID's.

change text string on couple website at the same time using jquery

22I am preparing a website which will contain prices of products on couple pages. Sometimes the same products are on couple of pages (e.g. on the main page and the specific product page). What I'm trying to achieve is to have ability of using any sort of spreadsheet or any other type of document (another perhaps) to control prices of all items across the whole website. I believe every price must be indexed somehow so we know that in with id="product1" will be the correct price and different than in id="product2".
Currently I have the example code here:
<h3>Product 1</h3>
<div class="price">
<span id="product1">£55 per day</span>
</div>
<h3>Product 2</h3>
<div class="price">
<span id="product2">£20 per day</span>
</div>
etc...
Sorry for rather a 'question type' topic than the 'case type', but I was trying to find the solution already. I know it can be done in php, but I have no idea about php unfortunately. So anything in html / javascript will be handy. Thnx a lot for any help/advice.
use JSON, not XML It's not 2003. Your jquery would be:
var prices = $.get("prices.json")
var product;
$("h3").each.( function()
{
product = $(this).html();
$(this).next().children("span").html(prices[product]);
});
Assuming you have no other H3's on your pages, otherwise give each product ID 'h3' a class a la:
<h3 class="products">Product 1</h3>
and use $(".products") instead of $("h3").
You could also use a selector to pull the <div>'s by class, and fetch the child <span>'s id.
I would recommend storing the data in either a database or an xml file to be read by the website. That way it's a "change once" situation. However, the scope of what needs to be done is beyond what you'd find in a simple answer here.
Edit: Jquery is a client side language, which means that it will only change what's currently exposed to the client at that time. It does have the ability to read from an xml file, and use that data to populate the display. But that data does need to be stored externally for it to affect more than one page at the same time.

How to get XPATH of element in a document with multiple elements with the same id?

I fetch data from Google's AdWords website which has multiple elements with the same id.
I would like to get an XPath of a given element.
Could you suggest a jQuery / JavaScript function that can calculate an XPath of a given element assuming that the page may contain multiple elements with the same id?
Please don't tell me that I shouldn't have multiple elements with the same id. It wasn't my idea...
You know you can access the the xpath using //*[#id='blah'][1] and [2] etc. is that the answer you're looking for?
If you know that the element you want will be the nth occurrence of that id then Martin's suggestion will work.
You can also narrow results by searching by multiple attributes and defining an element, say you know that the id is unique for a div element with a specific name or class.
//div[#id='hello' and #name='world']
That may be enough for you but if not then you may be able to find the element you want by searching relatively to other elements.
Given the xml:
<root>
<div id='parent1'>
<div id='element1' />
<div id='element2' />
</div>
<div id='parent2'>
<div id='element1' name='foo' />
<div id='element2' name='bar' />
</div>
</root>
You could get the second element 2 in the following ways:
/root/div[2]/div[2]
//div[#id='parent2']/div[#id='element2']
//div[#id='element2' and name='bar']
//div[#id='element1' and #name='foo']/../div[#id='element2']

Categories