Develop Reference

Styling the HTML tags that are created in javascript

If i use HTML tags inside javascript file, how can i select them and use them in a css file?
for example:
javascript:
<li id="id"> name </li>
how can i select and use id in the stylesheet?
I tried it this way but it didnt work
#id li { background: red;}

I would avoid using ids as they have to be unique (no more than one per page). If you have to target specific list items use data attributes.
ul li[data-type="name"] { color: red; }
<ul>
<li data-type="name">Bobby</li>
<li data-type="age">26</li>
</ul

either you can use the JS also add style to the Element.
document.getElementById(id).style.property = new style
Add inline style using Javascript
Or you need to load the script before the style.

If you assign a id to any tag or element you don't need to use element or tag name to style it. Directly use id. by #id li { background: red; } it means inside the element(which has id) it search for another li element.
Try
#id {
background: red;
}

if your creating element dynamically it's better to apple style that time
for example
var el = document.createElement('div');
el.setAttribute(
'style',
'background-color: red; color: white; width: 150px; height: 150px; border: 1px red solid');
var container = document.getElementById('container-id');
container.appendChild(el);

I would avoid using ids as they have to be unique
.bgred { background: red;color:#fff }
.bggreen { background: green;color:#fff }
<ul>
<li class="bgred">Bobby</li>
<li class="bggreen">26</li>
</ul>

Previous and Next Sibling JavaScript

Okay so I've been studying the book JavaScript and jQuery interactive front end development by "Jon Duckett"
Im on page 210 "Previous and Next Sibling" how do i change the li.a attributes in the navigation drop down sub menu, i have removed all white space so that it does not pick up any unwanted textNodes in the HTML like so.
<ul>
<li>
Web Development
</li>
<li>
Graphic Design
</li>
<li>
Prototypes
</li>
<li>
Fun Stuff
</li>
</ul>
I added the JavaScript from the book to change the value of the class attributes but I am having trouble with this, it does not work but when I change the id to the <li>, the previous and next siblings disappear. i am confused as the code looks correct and it works on a different web page when i give the <li> an id. But does not seem to be working here which is strange. Any help to get this working would be great thanks
/*Javascript
Previous and Next Sibling for portfolio subLinks,
=====================================================================*/
var startItem = document.getElementById('subGraph');
var prevItem = startItem.previousSibling;
var nextItem = startItem.nextSibling;
/*change the value of the siblings class Attributes
=====================================================================*/
prevItem.className = 'checkIcon';
nextItem.className = 'altSubLinks1';
/*CSS
============================*/
.checkIcon{
background-color: teal;
color:#FFF;
text-shadow: 2px 2px 1px #3b6a5e;
border-top:1px solid #7ee0c9;
border-top: 1px solid #3b6a5e;
content: '\f00c';
position: absolute;
font-family: fontAwesome;
right: 5px;
line-height:50px;
color:#FFF;
}
.altSubLinks1{
background-color: #FFF;
color: #000;
}

The fact that your markup is all packed up and unindented (due to the textNodes i know) makes it hard to see that the element you are matching has no siblings.
Take a look at the indented markup:
<ul>
<li>Web Development</li>
<li>Graphic Design</li>
<li>Prototypes</li>
<li>Fun Stuff</li>
</ul>
Note that subGraph is the <a> tag that has no siblings. Only the <li> have siblings.
Therefore you must either set the ids on the <li> tags or navigate to them with parentElement.
Example with parentElement:
var startItem = document.getElementById('subGraph');
var prevItem = startItem.parentElement.previousSibling;
var nextItem = startItem.parentElement.nextSibling;
prevItem.className = 'checkIcon';
nextItem.className = 'altSubLinks1';
.checkIcon {
color:red;
}
.altSubLinks1 {
color:green;
}
<ul><li>Web Development</li><li>Graphic Design</li><li>Prototypes</li><li>Fun Stuff</li></ul>

Duplicating a division with child elements and buttons

I'm new to stack overflow so sorry if I don't articulate my problems well or show my code properly. working on a homework assignment where I have to create a game like the classic mastermind one. I have designed the game board and have created a 'round 1' division with toggling color buttons, submit button, and even calls up the proper result image (combination of white & black dots as img png).
My js code for duplicating the rounds is below. my problem is duplicating the round and all the functionality 9 more times. I would like to disable the toggle color buttons of a round once it is submitted and I would need to assign a new id to both the title of the round as well as the div where the result image would appear (since that changes with each new guess). But no matter what I try (generate all the code as string and append to body) the best I can get is 10 rounds but only functionality with round 1. All classes and Ids are same so the same event handlers and jQuery links should apply, yes?
Any-who, any help or suggestion is appreciated (thanks).
script code for creating rounds-
const nextRound = '
<div id="Round" class="level">
<h3 class="title"></h3>
<div class="buttondisplay">
<a id="boxa" class="button" class="active"></a>
<a id="boxb" class="button" class="active"></a>
<a id="boxc" class="button" class="active"></a>
<a id="boxd" class="button" class="active"></a>
</div><a id="submit" class="submitter">SUBMIT</a>
<div id="res1" class="results"></div>
</div>';
const buildRounds = () => { for (i = 1; i <= 10; i++){
$('#Gameboard').append(nextRound); }
}
The elements I would want to apply new ids are the boxa, boxb, boxc, and boxd, as well as the 'submit' and res1 (for resultsimage.png). Have been banging my head trying to make this work. Any help would be great. Or if you need more of the code, I can provide.
Thanks!
Rick

Issue
ids must be unique per page. You have a total of 6 different ids and each of those ids has 10 duplicates. jQuery/JavaScript will expect only one #Round or it expects one #boxc so once it finds an id it stops there and all the other duplicates are ignored or worse not entirely ignored. Basically when you have more than one element sharing an id, you will most likely get undesirable results if any at all. So you must make each id unique and a common way to do that is to assign a number to each id during a loop (i.e. "Round"+i)
BTW an element cannot have any duplicate attributes as well. So
<a id="boxd" class="button" class="active"></a>
is invalid and most likely the class='button' will be overwritten by class='active'. For multiple classes on a single element the syntax is:
<a id="boxd" class="button active"></a>
Details are commented in demo
Verify that all ids are unique by inspecting the page with DevTools.
Added Demo 2 which uses String Literals instead of Template Literals. IE does not support Template Literals hence Demo 2.
Demo 1 -- Using Template Literals
// Pass a number of rounds (i.e. 'qty')
function buildRounds(qty) {
/* Declare 'i' with 'let' limits i to only what
|| applies within the scope of the 'for' loop.
|| This limit helps 'i' to increment properly
|| without the influence of references outside
|| of the loop.
*/
for (let i = 1; i <= qty; i++) {
/* Use ES6 Template Literals* for complex strings
|| by wrapping the whole string with backticks `.
|| What is seen in code is literally rendered so
|| new lines are NOT ignored and escaping quotes
|| like this: `\'`or `\"` is not needed.
|| ${variable} is an interpolation of a value
|| inserted into the string. Note that the value 'i'
|| will be different on each loop therefore
|| ensuring unique ids.
*/
const nextRound = `
<div id="round${i}" class="level">
<h3 class="title">Round ${i}</h3>
<div class="buttonDisplay">
<a id="boxA${i}" class="button">A</a>
<a id="boxB${i}" class="button">B</a>
<a id="boxC${i}" class="button">C</a>
<a id="boxD${i}" class="button">D</a>
</div>
<a id="submit${i}" class="submitter">SUBMIT</a>
<div id="result${i}" class="results"></div>
</div>
`;
$('#gameBoard').append(nextRound);
}
/* Added function will toggle the '.active' class on/off
|| on each clicked '.button'. I don't know exactly what
|| good a "status" class would be if on every button,
|| so I changed it so now it can be toggled by user
*/
$('.button').on('click', function() {
$(this).toggleClass('active');
});
}
/* Call buildRounds() and pass the number
|| of rounds desired.
*/
buildRounds(10);
/* * Template Literals are not supported by M$ browsers
|| (i.e. IE). See Demo 2
*/
.button,
.submitter {
display: inline-block;
border: 3px ridge blue;
padding: 0 5px;
margin: 10px 5px;
color: blue;
cursor: pointer;
}
.button.active {
border: 3px inset red;
outline: 2px solid tomato;
color: red;
}
<main id='gameBoard'></main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Demo 2 -- Using + to concat strings.
function buildRounds(qty) {
for (let i = 1; i <= qty; i++) {
/* This portion of the code is modifed to the use
|| of string literals instead of template literals.
|| If IE support is needed, then use this version.
*/
const nextRound = '<div id="round' + i + '" class ="level"><h3 class="title"> Round ' + i + ' </h3><div class="buttonDisplay"><a id="boxA' + i + '" class="button">A</a><a id="boxB' + i + '" class="button">B</a><a id="boxC' + i + '" class="button">C</a><a id="boxD' + i + '" class="button">D</a></div><a id="submit' + i + '" class="submitter">SUBMIT</a><div id="result' + i + '" class = "results"></div></div>';
$('#gameBoard').append(nextRound);
}
$('.button').on('click', function() {
$(this).toggleClass('active');
});
}
buildRounds(10);
.button,
.submitter {
display: inline-block;
border: 3px ridge blue;
padding: 0 5px;
margin: 10px 5px;
color: blue;
cursor: pointer;
}
.button.active {
border: 3px inset red;
outline: 2px solid tomato;
color: red;
}
<main id='gameBoard'></main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Change the selected list element in a navigation list using plain JavaScript

I have trouble in writing a script to change the appearance of the clicked tab in a webpage navigation list. In other words, I want to make the clicked tab appear as the selected (in code). I tried to do that by changing its id to selected_link and restoring the id of the previously selected tab.
EDIT: Following jamespaned's suggestion, I replaced element IDs with classes.
My tabs appear like in this picture:
So, when I click to "bio", I want it to appear as "home" and "home" to appear as the other tabs.
As I'm a newbie in JavaScript coding, I didn't managed to accomplish that. Here is what I've done:
The HTML code for the (inline) navigation list:
<nav>
<ul id="navlist">
<li class="selected"> home </li>
<li class=""> bio </li>
<li class=""> publications </li>
<li class=""> software </li>
<li class=""> contact </li>
</ul>
</nav>
its respective CSS:
nav ul {
list-style:none;
padding:0;
margin:0;
}
nav li {
background-color:black;
display:inline;
border:solid;
border-width:1px 1px 0 1px;
margin:0 5px 0 0;
}
nav li a {
color:white;
padding:0 10px;
}
.selected {
background-color:white;
padding-bottom: 1px;
}
.selected_link{
color:blue;
}
and the JavaScript which I've designed to accomplish this task, but it didn't worked:
function changeSelected(clickedId)
{
var ulist = document.getElementById("navlist");
var elems = ulist.getElementsByTagName("class");
for (var i = 0; i < elems.length - 1; i++)
{
var sel = elems[i].getAttribute("class");
if (sel == selected)
{
var selli = elems[i];
break;
}
}
selli.setAttribute("class", "");
selli.lastElementChild.setAttribute("class", "");
var clicked = document.getElementById(clickedId);
clicked.setAttribute("class", "selected_link");
clicked.parentNode.setAttribute("class", "selected");
}
How could I do that using only plain JavaScript?

This Javascript will do what you want:
function changeSelected(clickedId)
{
var selli = document.getElementById("selected");
var sela = document.getElementById("selected_link");
sela.setAttribute("id", "");
selli.setAttribute("id", "");
var clicked = document.getElementById(clickedId);
clicked.setAttribute("id", "selected_link");
clicked.parentNode.setAttribute("id", "selected");
}
That said, here are some ideas that might help your Javascript education:
You are using Javascript to set your IDs, but the Javascript won't work on the next page after you've clicked on one of the links. You'll probably need to do some backend (PHP/Ruby, etc) coding to get your styles to change.
IDs are normally used to refer to a unique element on the page that doesn't change, such as a #header or #sidebar_banner. You might want to use a class instead, such as ".selected_link".
You don't need both #selected_link and #selected. You could do ".selected" and ".selected a" to change the CSS so you only need to change one element.
Hope that helps!

Add to Favorites Array

What I want to do in Javascript/Jquery is be able to click a button (a button on each item), that adds it to an array. This array will then be posted in order when you click on a favorites page.
I'm just having a hard time wrapping my head around how this would work. Because I may want each item in the array to contain a few things, such as a picture and text describing the item.
In general terms/examples, how would this be set up?

There are a number of ways to do this. But, I'll go with one that's a bit more general - which you can extend for yourself:
http://jsfiddle.net/TEELr/11/
HTML:
This simply creates different elements with the favorite class - which will be the selector by which we check if an element has been clicked.
<div class="favorite"><p>Add to favorites</p></div>
<div class="favorite type2"><p>Just another favorite type</p></div>
<button id="reveal">
Reveal Favorites
</button>
JS:
Every time an element with the "favorite" CSS class is clicked, it is added to the array - this also works for elements with more than one class (that have the "favorite" CSS class).
Now, when the "Reveal Favorites" button is clicked, it will alert what's in the array - which is in the order clicked (as asked).
$(document).ready(function() {
var favorites = [];
var counter = 0;
$('.favorite').click(function() {
++counter;
favorites.push("\"" + $(this).text() + " " + counter + "\"");
});
$('#reveal').click(function() {
alert(favorites);
});
});
CSS:
Simple CSS that only exist for demonstration purposes to prove previous point with multiple CSS class selectors:
.favorite {
width: 400px;
height: 50px;
line-height: 50px;
text-align: center;
display: block;
background-color: #f3f3f3;
border-bottom: 1px solid #ccc;
}
.favorite.type2 {
background-color: #ff3;
}
.favorite:hover {
cursor:hand;
cursor: pointer;
}