Develop Reference

multiple onclick functions not possible?

I'm new to javascript (and I'm not allowed to use jQuery in class) and I'm struggling with onclick functions.
I want two separate sentences to turn green and the other one pink when I click on it so I gave both of them a different id.
for(var i = 0; i < content.length; i++){
var contentText = content[i];
var opening = document.createElement("p");
opening.id = "opening";
if(content[i].id ==="opening"){
opening.innerText = contentText.text;
}
textContainer1.append(opening);
document.getElementById("opening").onclick = function opening(){
document.getElementById("opening").style.color = 'green';
}
This is the first onclick function and it works like it should! But when I add the other sentence underneath:
for(var j = 0; j < content.length; j++){
var contentText2 = content[j];
var second = document.createElement("p");
second.className = "chapter-1";
second.id = "second";
if (content[j].id ==="second"){
second.innerText = contentText2.text;
}
textContainer2.append(second);
}
document.getElementById("second").onclick = function second(){
document.getElementById("second").style.color = 'pink';
}
The second one doesn't work anymore. I really can't figure out how to solve this and I need several ones in the same file. Can someone please help?
EDIT
I found out that it only works for the first thing in the json list, and not for the second, or third, etc. So I think I need a for loop to search within the elements, but I'm not sure how to do that in this case...

New answer
I think you've missed a } in the first bit of code.
for(var i = 0; i < content.length; i++){
var contentText = content[i];
var opening = document.createElement("p");
opening.id = "opening";
if(content[i].id ==="opening"){
opening.innerText = contentText.text;
}
textContainer1.append(opening);
}
document.getElementById("opening").onclick = function opening(){
document.getElementById("opening").style.color = 'green';
}
Old answer with probably better code
I may be misunderstanding you, but if you want your sentences to go green/pink when clicking on them, you just need the second function in each of your examples.
<p id="opening" onclick="opening();">opening</p>
<p id="second" onclick="second();">second</p>
<script>
var opening = function() {
document.getElementById("opening").style.color = "green";
}
var second = function() {
document.getElementById("second").style.color = "pink";
}
</script>
This makes opening go green when one clicks it and second go pink when one clicks it.
Alternatively, if you want to assign it without adding onclick in HTML:
document.getElementById("opening").onclick = function() {
document.getElementById("opening").style.color = "green";
}
document.getElementById("second").onclick = function() {
document.getElementById("second").style.color = "pink";
}

Vanilla JS Modal with good iFrame support

Hi Im trying to trying to track down a good modern Vanilla Javascript modal/lytebox with iFrame support, essentially I have I number of links like below:
<a class="edit-html" href="/iframe.html?para=123"></a>
That I want to trigger the modal with iframe content, without having to embed anything other than JS/CSS in the page (i.e. no modal markup)
HighslideJS (http://highslide.com/examples/iframe.html) meets the main requirements(although it doesn't have a modern look and isn't open source) does anyone know of any alternatives?
I've had a look at this link http://planetozh.com/projects/lightbox-clones/ although the list looks quite old and only HighSlideJS meets my requirements on that list
So my main requirements are:
Vanilla JS (No dependencies)
Iframe Content determined by href tag
Actively Maintained, ideally on Github
Modal markup does not need to be manually embedded on page

Interesting to try to see how we could accomplish your iframe manipulation in a way that would degrade gracefully without script. The anchor tag attributes can do most of the heavy lifting.
Link
Link
<iframe name="iframe1" src="about:blank""></iframe>
Personally I think the best lightweight approach to dialogs is to use something sparse like the code below. They aren't often required to do much and therefore don't really require much in the way of being "maintained".
Fiddle here.
var Dialog = function(content, config){
/*
content: selector, element, or text to wrap into dialog body
config object parameters:
modal: boolean,
dialogClass: text,
createCallBack, renderCallBack, showCallBack, hideCallBack, toggleCallBack: functions
*/
var self = this;
this.config = config || {};
this.init = function(){
//check for an element passed as content or a selector corresponding to an element
self.content = content.tagName ? content : document.querySelector(content);
if( ! self.content){
//otherwise content is text to be appended to the dialog body
self.content = document.createElement("div");
self.content.innerText = content;
}
self.container = self.create();
self.body.appendChild(self.content);
if(document.body){
self.render();
}else{
document.body.addEventListener("load", self.render);
}
window.addEventListener("resize", function(){
self.size();
})
return self;
}
this.create=function create(){
self.container = document.createElement("div");
self.dialog = document.createElement("div");
self.head = document.createElement("h2");
self.closeButton = document.createElement("button");
self.body = document.createElement("div");
self.head.innerText = self.config.headerText || "";
self.dialog.appendChild(self.head);
self.dialog.appendChild(self.closeButton);
self.container.appendChild(self.dialog);
self.dialog.appendChild(self.body);
self.body.appendChild(self.content);
self.container.className = "dialog-container" + (self.config.modal ? " modal" : "");
self.dialog.className = "dialog " + self.config.dialogClass || "";
self.head.className = "dialog-head";
self.body.className = "dialog-body";
self.closeButton.className = "dialog-close";
self.closeButton.innerText = self.config.closeButtonText || "close";
self.closeButton.title = self.config.closeButtonText || "close"; self.closeButton.addEventListener("click", self.hide);
self.closeButton.setAttribute("type","button");
self.checkCallBack();
return self.container;
}
this.render = function render(){
document.body.appendChild(self.container);
self.checkCallBack(arguments);
return self.dialog;
}
this.show = function(){
setTimeout(function(){
self.container.classList.add("visible");
self.closeButton.focus();
self.checkCallBack(arguments);
return self.container;
},0);
}
this.hide = function hide(){
var iframe = self.dialog.querySelector("iframe");
if(iframe){
iframe.setAttribute("src","about:blank");
}
self.container.classList.remove("visible");
self.checkCallBack(arguments);
return self.container;
}
this.toggle = function(){
if(self.dialog.classList.contains("visible")){
self.hide();
}else{
self.show();
}
self.checkCallBack(arguments);
return self.container;
}
this.size = function(){
var padding = 80;
self.body.style.maxHeight = window.innerHeight - self.head.offsetHeight - padding + "px";
console.log(self.body.style.maxHeight);
return self.body.style.maxHeight;
}
this.checkCallBack = function(args){
var action = arguments.callee.caller.name,
callBackName = action + "CallBack",
args = Array.prototype.slice.call(args || []),
fn = self.config[callBackName];
if(fn){
args.unshift(action);
fn.apply(self, args);
}
return !!fn;
}
this.init();
}
//sample usage
var.modal = new Dialog("iframe", {modal: true});

tag onclick being processed twice

I want clicking on an "expando" to toggle between its states: expanded and collapsed.
I'm still pretty new to DOM/JS, so my style here is probably awful; If you have any style guidelines let me know, but for right now I want to get the code working. I've tried a few different ways, like setting the expand or collapse behavior in dom's onclick (and changing it in the expand and collapse functions), but if I do that, then for some reason clicking doesn't trigger a collapse, but it will trigger an expand.
The problem with the code below is that I can expand an expando, but when I click on it, it also triggers the collapse, so it expands and then immediately collapses back.
var expandos = document.getElementsByTagName("expando");
var uid = 0;
for(var i=0; i<expandos.length; ++i) {
var dom = expandos[i];
dom.id = "expando_"+uid++;
var iframe = document.createElement("iframe");
iframe.src = dom.innerHTML;
iframe.name = dom.id +".big";
iframe.id = iframe.name;
iframe.scrolling = "no";
iframe.style.display = "inline";
iframe.onclick = collapse(dom);
var p = document.createElement("p");
var text = document.createTextNode(dom.innerHTML);
p.id = dom.id+".small";
p.style.display = "inline";
p.appendChild(text);
p.onclick = expand(dom);
dom.innerHTML = "";
/* We have to clear the innerHTML to prevent the original text from
showing up in addition to the text added by p.
*/
dom.appendChild(iframe);
dom.appendChild(p);
/* We have to append iframe and p **after** we clear innerHTML
because otherwise clearing innerHTML will clear the appended
children.
*/
function expand(dom) {
return function() {
alert("Expanding "+dom.id);
var iframe = document.getElementById(dom.id+".big");
var p = document.getElementById(dom.id+".small");
p.style.display = "none";
iframe.style.display = "initial";
dom.onclick = collapse(dom);
}
}
function collapse(dom) {
return function() {
alert("Collapsing "+dom.id);
var iframe = document.getElementById(dom.id+".big");
var p = document.getElementById(dom.id+".small");
p.style.display = "initial";
iframe.style.display = "none";
dom.onclick = expand(dom);
}
}
collapse(dom)();
}
The sample HTML I'm testing on:
<body>
<expando>The quick brown</expando> fox jumps over <expando>the lazy dog</expando>.
<script src="loadExpandos.js"></script>
</body>
In the same directory, I have files named "The quick brown" and "the lazy dog", and they expand properly.

A quick fix for to get the basic functionality you want is to combine your expand and collapse into a single function and have an if/else block that checks the state. Not 100% on what caused your original issue, but I'd guess it has something to do with your onClick events not being cleared.
function clickHandler(dom) {
return function() {
var iframe = document.getElementById(dom.id+".big");
var p = document.getElementById(dom.id+".small");
if(p.style.display === "initial"){
p.style.display = "none";
iframe.style.display = "initial";
} else {
p.style.display = "initial";
iframe.style.display = "none";
}

Javascript Create Clickable Text

EDIT 2 - I decided to create a simple example with jsfiddle.
http://jsfiddle.net/VqA9g/61/
As you can see, I am trying to reference the new div.
EDIT - d/t negative votes and unclear question
I have a linked-list like so:
var struct_list = function () {
this.id = 0;
this.name = 0;
this._head = null;
};
struct_list.prototype = {
// .. adding code , delete code ...
list_contents: function () {
var current = this._head;
while ( current != null ) {
var div = document.createElement("div");
div.style.width = "100px";
div.style.height = "100px";
div.style.background = "white";
div.style.color = "black";
div.style.top = "0px";
div.style.left = "0px";
div.style.margin = "400px 1000px auto";
div.style.cursor = "pointer";
div.innerHTML = current.name;
div.onclick = function ( v ) { var d = document.getElementById('div'); alert(d)};
document.body.appendChild(div);
current = current.next;
}
return null;
},};
I want to be able to display this linked list, and each item displayed be able to interact with an "onclick".
Example:
struct_list.add ( 0 , "Zero" );
struct_list.add ( 1 , "One" );
struct_list.list_contents();
_________________________________________________________________________
| |
| <clickable> "Zero" that does a function(id) that passes over its ID(0) |
|________________________________________________________________________|
| |
| <clickable> "One" <same as above> |
|________________________________________________________________________|
Sorry if I was unclear. Will reedit if still unclear. My apologies.
I have a linked-list struct that I hold data in (it changes data frequently) and I have a setInterval to refresh it. My question is how can I list the struct's contents while still being able to click the exposed content, I have it set up right now that each content in the linked-list contains an id. Also , how can I make sure that overflow is automatic for the y axis? I am guessing I have to place it into a div that has that enabled.
But my real question is how to expose the linked-lists elements while also being able to interact with them via an onclick.
I also do not want to use anything other than pure javascript.
Example (in my mind) would maybe be something like:
<div id="PopUp">
<script>
setInterval(function() {
if ( struct_qued_list ) {
struct_qued_list = false;
main.struct_list.list_contents(); // the linked list
}
}, 100);
</script>
</div>
list_contents: function () {
var current = this._head;
while ( current != null ) {
var div = document.createElement("div");
div.style.width = "100px";
div.style.height = "100px";
div.style.background = "white";
div.style.color = "black";
div.style.top = "0px";
div.style.left = "0px";
div.style.margin = "400px 1000px auto";
div.style.cursor = "pointer";
div.innerHTML = current.name;
div.onclick = function ( v ) { var d = document.getElementById('div'); alert(d)};
document.body.appendChild(div);
current = current.next;
}
return null;
},
Any help or logical way to do this would be appreciated.

This is mainly a scope problem, in your Edit 2 fiddle, the alert gives undefined because your i got the value 2 in order to leave the loop.
Here is a possible solution : Live demo (jsfiddle)
!function(){
var index = i; // Make it independant of i
div.onclick = function () { alert(list[index]); };
}();
You could also use attributes to store any value, and using this in the function to retrieve it.
Or export the whole process to another function to obtain something like this :
for ( var i = 0; i < 2 ; i++ ) {
doSomething(i);
}

When you add new content to the DOM JavaScript sometimes has a hard time picking that up. You may need to use a DOM mutation event (like DOMNodeInserted) to add the event listeners to your text nodes.
document.addEventListener('DOMNodeInserted', function(){
document.getElementById('thing').addEventListener('click', function(){
alert('yey!');
});
});
you may need to name your functions so you can remove them as well, if nodes are going to be inserted without removing all the old ones. Yes this is pure javascript.
EDIT: for your overflow issue, you could assign a class to each node as you insert it and style the class via CSS
.classname {
overflow: auto;
}

Loading a form into an iframe

I want to load a form into an iframe. The iframe will be loaded into a random page when the user clicks the bookmarklet.
Here is the code so far:
loginForm = document.createElement("form");
loginForm.setAttribute("method","Post");
loginForm.setAttribute("action","http://devserver:8000/action/");
parameters = {};
parameters['url'] = parent.window.location;
for(var key in parameters)
{
var hiddenField = document.createElement("input");
hiddenField.setAttribute('type',"hidden");
hiddenField.setAttribute('name',key);
hiddenField.setAttribute('value',parameters[key]);
loginForm.appendChild(hiddenField);
}
loginIFrame = document.createElement('iframe');
loginIFrame.src = "about:blank";
loginIFrame.appendChild(loginForm);
loginIFrame.style.top = "0px";
loginIFrame.style.position='fixed';
loginIFrame.style.display = 'block';
loginIFrame.style.zIndex = 100;
loginIFrame.style.border = "solid #48D236 10px";
loginIFrame.height = "25px";
loginIFrame.width = "100%";
loginIFrame.style.border = 0;
loginIFrame.id = "loginFrame";
loginIFrame.name = "loginFrame";
usernameField = document.createElement("input");
usernameField.type = "text";
usernameField.size = 8;
usernameField.name = "usernameField";
usernameField.id = "usernameField";
passwordField = document.createElement("input");
passwordField.type = "password";
passwordField.size = 8;
passwordField.name = "passwordField";
passwordField.id = "passwordField";
submitButton.style.position='fixed';
submitButton.style.top = "60px";
submitButton.type = "button";
submitButton.value = "Submit";
submitButton.onclick = function(){loginUser();};*/
b.style.position="relative";
addToBody(loginIFrame);
loginForm.submit();
What ends up happening is the entire page gets reloaded on the submit (last line of code) rather than the iframe. Any ideas?
Thanks in advance

You might want to try adding the form using loginIFrame.contentWindow.document instead of loginIFrame.appendChild.
You might also need to add your form after the iframe has been added to the page since the contentWindow property won't be available.
I could be wrong, but I'm pretty sure that form isn't being added to the iframe, because you are using appendChild. I really don't think you can manipulate it that wa since it will be loading the URL you tell it to load (i.e. about:blank).
Edit: You might also want to add loginForm.setAttribute("target", "loginFrame");
Here is what I've been testing with and it works fine:
loginIFrame = document.createElement('iframe');
loginIFrame.src = "about:blank";
loginIFrame.style.top = "0px";
loginIFrame.style.position='fixed';
loginIFrame.style.display = 'block';
loginIFrame.style.zIndex = 100;
loginIFrame.style.border = "solid #48D236 10px";
loginIFrame.height = "100px";
loginIFrame.width = "100%";
loginIFrame.style.border = 0;
loginIFrame.id = "loginFrame";
loginIFrame.name = "loginFrame";
document.body.appendChild(loginIFrame);
var idocument = loginIFrame.contentWindow.document;
loginForm = idocument.createElement("form");
loginForm.setAttribute("target", "loginFrame");
loginForm.setAttribute("method","Post");
loginForm.setAttribute("action","http://devserver:8000/action/");
parameters = {};
parameters['url'] = parent.window.location;
for(var key in parameters)
{
var hiddenField = idocument.createElement("input");
hiddenField.setAttribute('type',"hidden");
hiddenField.setAttribute('name',key);
hiddenField.setAttribute('value',parameters[key]);
loginForm.appendChild(hiddenField);
}
loginIFrame.appendChild(loginForm);
loginForm.submit();
Christian

Possibly set the form target to the iFrame. I'm imagining, since you're creating elements within the "parent" page context, it's using the main page as a target (even though it's embeded).
EDIT
You could also try calling createElement from the iFrame after you've created it to keep context too.