Develop Reference

document.preventDefault() is not what I need

I made a website running on an Apache server. The website is only accessed by me. It consists of a drop down list with two options and a "Generate" button. When the button is click, it shows a list of audio elements containing songs. Above each audio element is also a link to the mp3 file itself. I wanted to make a Lightbox
fade in and show the audio element separately when someone clicked on it. I used JQuery to prevent default behaviour when the a tag was clicked, but cannot find a way of only targeting it. This is my problem:
document.addEventListener("click", function(event){
event.preventDefault();});
I have tried changing the document part, but it is showing this error: 'Uncaught TypeError: songPlayer.addEventListener is not a function'. Currently, it is targeting all of the document DOM elements, which is not what I want. Is there any other way of achieving this? Also, does anyone have any tips on making lightboxes? Thanks.

addEventListener needs to be called on a dom element, of soundPlayer has an id of soundPlayer:
var soundPlayer = document.getElementById('soundPlayer');
is what we need,
then we can do:
soundPlayer.addEventListener("click", function(event){
...

In jquery you do the following:
$('#soundPlayer').on('click',function(e){//change #soundPlayer with the css selector of your element
e.preventDefault();
});

Hiding an element across multiple pages

I'm creating a chrome extension that hides a jQuery element on the page when clicked.
I need to store a reference to this element in the chrome.storage API, so when the page is loaded at a later date I can have that element hidden again.
I know the DOM tree is rebuilt on page load, and I'm not sure if this will effect anything. The element could be anything on the page as well, so not necessarily having a class/id name.
What is the best way to go about storing the reference? I'm all out of ideas on how to do this (brand new to JavaScript).
Update
As suggested by Xan, I am now using xPath to store a reference to the element.
//Get the element
var elem = e.target || e.srcElement;
$(elem).click(function () {
xPathOfElem = getElementXPath(elem); //Get xPath of element
updateStorage(xPathOfElem);
$(elem).hide("");
return false;
});
//Store it
function updateStorage(xPathOfElem) {
chrome.storage.sync.set({"element":xPathOfElem} //set xPath to storage
, function (data) {});
};
//Retrieve it on load later
function getStorage() {
chrome.storage.sync.get(null, function (data) {
$(getElementsByXPath(document, data.element)).hide(""); //get and hide element
});
}
window.onload = function () {
getStorage();
};
As Xan mentioned, not a perfect approach if the page isn't static but it does what I need it to

This is a very broad question and the reason is: in general, there is no way you can reliably pinpoint an element on a page, especially if it's dynamic.
There is no "single" solution that works for every page. However, assuming that you can devise a method of pinpointing an element, you should look into DOM XPath.
It's a rich way of describing how to find an element, much more general than class/id name. And it's just a string, so it can easily be stored. Once you have this description, you can find the element using document.evaluate.
The downside is, there is no such thing as "the XPath" of an element. You need to come up with your own method of constructing one for a given element, and like I said to do so automatically is nigh-impossible. You're certainly welcome to try an cover many common cases, but finding a universal solution is hopeless.
P.S. See this question for finding "an XPath" of an element. Again, would only work reliably in a static page.

Targeting an ID that is rendered by a script

I'm using a nifty little script called Tabifier (http://www.barelyfitz.com/projects/tabber/)
Now, long story short, this script, which I run in my head tag, creates a <ul> with <li>s containing <a>s. Also in the head tag it creates IDs for these <a>s. When I inspect the loaded site I can clearly see the ID tags present. However, I cannot call them using getElementById. I've been using
<script>
document.getElementById('rightpanelnav1').style.padding='200px';
</script>
as a sample script in different parts of my code but to no avail. I'm wondering wether it's the placement or order in which these things are defined in my code that's causing it not to recognize the ID. What do you think?
EDIT: I recieved a great answer below, but I still can't get 'rightpanelnav1' to register onclick events...? It's an , there shouldn't be a problem, right? And when I click it, the entire page has been loaded for several seconds...

Firstly, in order to access an element in the DOM, the element must be a part of the DOM (document). So if you place your <script> with getElementById in the page at a place prior to where the element is loaded, it will not see the element in the DOM.
Secondly, it is highly probable that this library you use does its modification on page load, which would mean that no matter where you place your <script> it would have no chance of seeing these elements before running.
As a result, you should have your script wait as well, and do this:
window.onload = function(){
document.getElementById('rightpanelnav1').style.padding='200px';
};
Or for a click event
window.onload = function(){
document.getElementById('rightpanelnav1').onclick = function(){
alert("clicked!");
};
};

javascript check whether a specific element (iframe) exist, if not, appendchild

i want to achieve some feature like this:
var el = document.createElement("iframe");
el.setAttribute('id', 'ifrm');
document.body.appendChild(el);
el.setAttribute('src', 'http://www.example.com');
and if "ifrm" exists, jt won't create new iframe. if it doesn't exist, it will create that frame. i want to do this to avoid duplicate frame creation when user keeps click on the same button to generate frame. is there a way to check whether a specific iframe exists? thanks

You can check with getElementById('ifrm') whether or not the frame with that id already exists. If not, create it. Like so:
if(!document.getElementById("ifrm"))
// Create the damn thing
If you wish to check if there is any iframe at all, you could use getElementsByTagName('iframe').
To make live a little easier, you can take a look at jQuery. This is a Javascript library that helps you to create DOM objects and/or find them in the DOM tree.

if(document.getElementById("ifrm"))
//then it exists
else
//it doesn't exist yet

Manipulate href of anchor based on class in Prototype

I'm trying to manipulate some anchors after the document is loaded to alter their href attribute using Prototype. Based on the class of an anchor, its href has to be rewritten to be used by a tracking software.
I hacked some things together but can't quite figure out why it doesn't work. It always returns undefined, not matter what I search for.
<script type="text/javascript">
var elements = $$(".replace");
for (el in elements) {
el.href = "other_href.html";
}
</script>
Link
When I alert(el) in the loop, it returns either undefined or (when I search for a.replace an extraordinary number of elements that don't even exist on my page.
Where is my thinking error in here?

Untested:
<script type="text/javascript">
document.observe('dom:loaded', function() {
$$(".replace").each(function(a) {
a.writeAttribute('href', 'other_href.html');
});
});
</script>
Link
I'm guessing your JavaScript was loaded and executed before the HTML it was supposed to manipulate was loaded by the browser. It can't manipulate what doesn't exists yet. That's where observing events comes in handy. In this case, we're waiting for the DOM to finish loading, but before the page is rendered by the browser, to make our changes.
I also took advantage of Prototype's each() functionality. It's a great way to loop through arrays and any enumerables. And writeAttribute() is a good cross-browser way to modify element attributes.