We Keep Coding

How can I create rows of data using jquery append()?

How can I make a new row of data using jquery? For example i have a div with an id "box" and I have two spans each with an id of "name" and "time".
How can I have jquery append to this box holding both name and time? I tried experimenting and tried this code, but didn't work.
$("#button").click(function(){
$("#box").append(
$("#name").text("username"),
$("#time").text("5:00pm")
);
)}
In this code, I expected the box to create a new row of data every time I click the button. So if I want 5 rows of data, I would just click the button 5 times.

IDs must be unique and you need new spans
$("#button").on("click",function() {
$("#box").append(
"<br><span>username</span> <span>5:00pm</span>"
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button type="button" id="button">Click</button>
<div id="box"></div>
With vars, you can use a template literal
var cnt=0,
data = [{ username: "John", time: "05:00pm" },
{ username: "Paul", time: "07:00pm" }];
$("#button").on("click", function() {
if (cnt < data.length) {
$("#box").append(
`<br><span class="user">${data[cnt].username}</span> <span class="time">${data[cnt++].time}</span>`
);
}
});
.user { color:green }
.time { color: red }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button type="button" id="button">Click</button>
<div id="box"></div>

this is how you must do :
$(document).ready(function() {
$('#button').click(function(){
$("#box").append('<br><span>username</span><span>5:00pm</span>')
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
</div>
<a id="button">button</a>

Since ID must be unique as #mplungjan mentioned, assuming you have some css linked with them, i'll just give examples with a class instead of IDs
$("#button").click(function(){
$("#main").append(
$("<div>").addClass("box")
.append($("<span>").addClass("name").text("username"))
.append($("<span>").addClass("time").text("5:00PM"))
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main"></div>
<button id="button">Click me</button>
As you can see, after using the syntax $("<div>") you can chain as you want like you would in jQuery. The main difference between this and what #mplungjan has shown is how dynamic you are planning to make these. If you are planning on expanding these divs and spans dynamically as you go you are better off using this. If not and you just want lesser syntax you could rather use his.

change display of element with class x by clicking element with class y (JS)

Using JS or Jquery (preferred JS) how can I change the display style of an element after clicking on another element (both elements identified by their respective classes).
The below doesnt seem to work.
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<i id="xyz" class="class1" >hey</i>
<div id="abc" class="class2" style="display: block;">lo</div>
<script type="text/javascript>
$(function() {
$(".xyz").click(function() {
console.log("element with class xyz was clicked");
$(".abc").css('display': 'none');
});
});
</script>
the console doesnt even log anything

It looks like you are trying to reference your IDs by using CLASS syntax in your jQuery selector.
Instead of using $(".xyz") use $("#xyz"). Same for your $(".abc") selector.
Hope that helps!

You should use document.querySelector(cssSelector) for getting elements by class or id or document.getElementById to get elements by id only.
Here is VanilaJS solution:
var firstElem = document.querySelector(".class1");
firstElem.addEventListener("click", function(event){
var secondElem = document.querySelector(".class2");
secondElem.style.display = "none";
})
<i id="xyz" class="class1" >hey</i>
<div id="abc" class="class2">lo</div>

JQuery ("button").click doesn't work

The example below works. (Example taken from w3cschools, and hacked a bit.)
Clicking anywhere in the DIV will cause the address class div to disappear.
However, changing the third line of the script to read
$("button").click(function(){
instead of "div" and it just sits there like a paperweight. What am I missing.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("div").click(function(){
$(this).children(".address").toggle("slow");
});
});
</script>
<style type="text/css">
div.ex
{
background-color:#e5eecc;
padding:7px;
border:solid 1px #c3c3c3;
}
</style>
</head>
<body>
<h3>Island Trading</h3>
<div class=ex>
<button>Hide me</button>
<div class=address>
<p>Contact: Helen Bennett<br>
Garden House Crowther Way<br>
London</p>
</div>
</div>
<h3>Paris spécialités</h3>
<div class=ex>
<button class="hide">Hide me</button>
<div class=address>
<p>Contact: Marie Bertrand<br>
265, Boulevard Charonne<br>
Paris</p>
</div>
</div>
</body>
</html>

Change
$(this).children(".address").toggle("slow");
To something like:
$('.address').toggle("slow");
OR
$(this).siblings(".address").toggle("slow");
Once you make the listener act on the button element, .address is not a child of button any longer. It's a sibling. If there will be multiple .address classes on your page, you must use siblings.
http://jsfiddle.net/9S722/1/

Try this:
$("button").on("click", function(){
$(this).parent().children(".address").toggle("slow");
});
http://jsfiddle.net/hescano/9S722/

$(this).parent().children(".address").toggle("slow");
The button doesn't have children

$("div").click(function(){
$(this).children(".address").toggle("slow");
});
The meaning of such code above is that, when click trigger in div container, it will go through its children for matching "address" class attribute.
However, if you just change $("div") to $("button"), but no child appears within button element. nothing matches for toggle function, just ignore it.
You should change code to as below:
$("button").click(function () {
$(this).next(".address").toggle("slow");
});
which find next sibling to button element. That is the element you want.

Selecting all children of an element and fadeing them out using jQuery?

I am using the following HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Project Quiz</title>
<link rel="stylesheet" type="text/css" href="z/baseCss.CSS">
<script src="/jquery-1.9.1.min.js"></script>
<script src="/baseJS.js"></script>
</head>
<body>
<div id=header></div>
<div id=contain>
<h1>Welcome to my web application</br>
Please enter your name, click 'continue' and have fun</h1>
<form>
<input type="text" id="name" value="John Doe"/>
</form>
<div class="awesome">Continue</div><br/>
</div>
<div id=footer></div>
</body>
</html>
and a code of jQuery:
$(document).ready(function(){
$("input")
.focus(function(){
$(this).css('outline-color','#559FFF');
$(this).blur(function(){
$(this).css("outline-color","#FF0000");
});
});
$("input").click(function(){
var value = $(this).val(function(){
$(this).html("");
});
});
$(".awesome").click(function(){
b._slide(1000);
});
var b = $("div:nth-child(2)");
alert(b);
});
My problem is that I can't figure it out how to select all children of <div id="contain"> and just make them fade out when I click my div button which is the one with the "awesome" class.
This is what I have tried so far:
$(".contain").each(function(){
$(this).fadeOut(1000);
});
but it didnt work also i tried:
$(".contain").children(function(){
$(this).fadeOut(1000);
});
Same result here.
What am I doing wrong? I only need to fadeOut the content of <div id="contain"> and keep everything else the same as it is.

You need to use:
$("#contain").children().fadeOut(1000);
$(this) is your selector
.children() selects all the children of an element
.fadeOut(1000) fades out the current selection
Your attempts were wrong because:
$(".contain").each(function(){ $(this).fadeOut(1000); });
Selects all the elements with class .contain and hides them
$(".contain").children(function(){ $(this).fadeOut(1000); });
Selects the elements with class .contain, and then you're passing a function to .children() which it does not handle.
Note, in your case contain is an ID and not a class.

beside shangeing the "." to "#" form the jquery selector, if you don't need to insert anything else or display new content into <div id="contain">, you can just do this
$("#contain").fade(1000);
all the child will fade too

Javascript onclick events

I want to blur my images by clicking on it. I am using javascript on click event for this purpose. But it is not working exactly as I want. My code is given below:
<script>
$(document).ready(function(){
$(".ww").click(function(){
$(this).css("opacity","0.2");
});
});
</script>
<div class="bg">
<div class="img ww1"><center><img src="img.jpg" /></center></div>
<div class="canname"><center>GHULAM MUSTAFA</center></div>
<div class="partyname"><center>JATOI <span style="color:#CCC;">NPP</span></center></div>
</div>
<div class="bg">
<div class="img ww2"><center><img src="img.jpg" /></center></div>
<div class="canname"><center>GHULAM MUSTAFA</center></div>
<div class="partyname"><center>JATOI <span style="color:#CCC;">NPP</span></center></div>
</div>
I want that when I click first image then its opacity would set. And that when I click second image so the opacity of first image would finish and second image would set.

As the others already tried to explain, you have to use a selector which actually selects both elements, since you want to bind the event handler to both of them. $('.ww') does not select any element in the code you posted.
Toggling the opacity can be easier done when using a class:
.selected {
opacity: 0.2;
}
Add the class to the clicked element and removed it from the element currently having the class:
$(".img").click(function(){
$('.img.selected').add(this).toggleClass('selected');
});
Have a look at this DEMO. This should give you enough information to apply it to your situation.

Because a selector .ww does not match ww1 and ww2.
You can see that with
console.log($(".ww").length);
Use the common class img or add the class ww.

<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#my').toggle(
function(event) {
$(event.target).css('opacity',0.4);
},
function(event) {
$(event.target).css('opacity',1.0);
}
);
});
</script>
</head>
<body>
<body>
<div id="my">asdf</div>
</body>
</html>