I am new to web development. I am trying to create my photography webpage. I have created a basic html design.
I want to filter the image when the specific button is clicked. I went through the w3schools code about it but could not get quite clear about it. Not with the JQuery.
Here is my html code with buttons.
Thank you
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gallery</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script src="script.js"></script>
<div id="myBtnContainer">
<button class="btn active" onclick="filterSelection('all')">ALL</button>
<button class="btn active" onclick="filterSelection('all')">Nature</button>
<button class="btn active" onclick="filterSelection('all')">Animal</button>
</div>
<!--grid-->
<div class="row">
<div class="column_nature">
<div class="content">
<img src="images/nature.jpg" style="width:40%">
<h4>Nature</h4>
<p>This is me</p>
</div>
</div>
</div>
<div class="column_nature">
<div class="content">
<img src="images/swan.jpg" style="width:40%">
<h4>Swan</h4>
</div>
</div>
</body>
</html>
Because both of your images had 'nature' on them, a filter would not have had any effect. I adapted your code to the w3schools example, but changed it so that the first image had 'nature' as a filter , and the second had 'bird' as a filter.
Incidentally, there is no underscore between the column and the filter name (If you put one in, as you did in your code) it won't work. I adapted this too.
Best of luck
/*this goes in your script.js*/
filterSelection("all") // Execute the function and show all columns
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("column");
if (c == "all") c = "";
// Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}
// Show filtered elements
function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {
element.className += " " + arr2[i];
}
}
}
// Hide elements that are not selected
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}
// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function(){
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
/*this bit will go into your style.css file*/
* {
box-sizing: border-box;
}
body {
background-color: #f1f1f1;
padding: 20px;
font-family: Arial;
}
/* Center website */
.main {
max-width: 1000px;
margin: auto;
}
h1 {
font-size: 50px;
word-break: break-all;
}
.row {
margin: 8px -16px;
}
/* Add padding BETWEEN each column (if you want) */
.row,
.row > .column {
padding: 8px;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
display: none; /* Hide columns by default */
}
/* Clear floats after rows */
.row:after {
content: "";
display: table;
clear: both;
}
/* Content */
.content {
background-color: white;
padding: 10px;
}
/* The "show" class is added to the filtered elements */
.show {
display: block;
}
/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 12px 16px;
background-color: white;
cursor: pointer;
}
/* Add a grey background color on mouse-over */
.btn:hover {
background-color: #ddd;
}
/* Add a dark background color to the active button */
.btn.active {
background-color: #666;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gallery</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script src="script.js"></script>
<div id="myBtnContainer">
<button class="btn active" onclick="filterSelection('all')">ALL</button>
<button class="btn active" onclick="filterSelection('nature')">Nature</button>
<button class="btn active" onclick="filterSelection('bird')">Animal</button>
</div>
<!--grid-->
<div class="row">
<div class="column nature">
<div class="content">
<img src="https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg" style="width:40%">
<h4>Nature</h4>
<p>This is me</p>
</div>
</div>
</div>
<div class="column bird">
<div class="content">
<img src="https://www.phrases.org.uk/images/swan-song-1.jpg" style="width:40%">
<h4>Swan</h4>
</div>
</div>
</body>
</html>
I understand that you're new to programming; so beware that some users may provide you with answers suggesting you install jQuery, or Bootstrap - which while that it entirely true and what I would recommend - I equally understand that these all provide steep learning curves for a beginner.
As such, you can develop in HTML, CSS, and the naked JavaScript library as standard. So I have provided a solution to your problem in the code below, and documented my code also, so that you may better understand it.
Replace your code, with my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gallery</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script src="script.js"></script>
<div id="myBtnContainer">
<button class="btn active" onclick="filterSelection('All')">ALL</button>
<button class="btn active"
onclick="filterSelection('Nature')">Nature</button>
<button class="btn active"
onclick="filterSelection('Swan')">Animal</button>
</div>
<!--grid-->
<div class="row">
<div class="column_nature filter" id="Nature">
<div class="content">
<img src="images/nature.jpg" style="width:40%">
<h4>Nature</h4>
<p>This is me</p>
</div>
</div>
</div>
<div class="column_nature filter" id="Swan">
<div class="content">
<img src="images/swan.jpg" style="width:40%">
<h4>Swan</h4>
</div>
</div>
</div>
<script>
// Function to hide all other elements, bar the parameter provided
function filterSelection(elementToShow){
if(elementToShow != "All"){
// Get an array of elements with the class name, filter.
var x = document.getElementsByClassName("filter");
// For each of them
for(var i = 0; i < x.length; i++){
// Make them invisible
x[i].style.display = "none";
}
// Get and then make the one you want, visible
var y = document.getElementById(elementToShow).style.display = "block";
}
else{ // If the parameter provided is all, we want to display everything
// Get an array of elements with the class name, filter.
var x = document.getElementsByClassName("filter");
// For each of them
for(var i = 0; i < x.length; i++){
//Make them visible
x[i].style.display = "block";
}
}
}
</script>
</body>
</html>
Please note the following; if you add a new button to filter something else, you must give it an * onclick="filterSelection('x')" * where the x is the name of that which you want to filter. Then on the div you want to keep, simply give it a class with the same name as "x".
So for instance, if I had a button:
<button onclick="filterSelection('Mountains')">Mountains</button>
Then I would expect that if I click it, that all filter class divs would be hidden, except for the div that had the class mountains. So I would have to have a div like so:
<div class="filter Mountains">This would be the div that would be displayed on click of the above button, and all others would be hidden.</div>
I hope this helps provide you with the answer you were looking for, although eventually it would be best to look into Bootstrap or jQuery which will be much more sustainable in the long run.
Related
I am trying to add an active class to my buttons so that when you click on them the hover animation would stay on the active button. It seems like something in my javascript does not follow through with my call to add the active class to whatever element I put it on. pls help thnx ^_^
https://jsfiddle.net/purpkev/pf1vzx2t/7/
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ukiyo Sushi ツ</title>
<link href = "/style.css" type = "text/css" rel = "stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fira+Sans&display=swap" rel="stylesheet">
<script src = "/script.js"></script>
</head>
<body>
<!--<div class = "hero active">
<div class = "hero1">
<div class = "hero2">-->
<header id = "bg">
<nav class = "navbar">
Ukiyo Sushi ツ
<ul>
<li>About us</li>
<li>Menu</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class = "sushiPlatter">
<h2 id = "caption">Chef's Special Sushi Platter</h2>
<div class = "dots">
<button class = "dot" onclick = "imgslider(1)"></button>
<button class = "dot" onclick = "imgslider(2)"></button>
<button class = "dot" onclick = "imgslider(3)"></button>
</div>
View Menu
</div>
</header>
<!--</div>
</div>
</div>-->
<section class = "idkYet">
<div>
<span>hello I am filler content</span>
</div>
</section>
</body>
</html>
CSS:
.dots{
display: flex;
flex-direction: column;
align-self: flex-end;
margin: 0 1em;
}
.dot{
display: inline-block;
cursor: pointer;
height: 15px;
width: 15px;
background-color: transparent;
border: solid 2px white;
border-radius: 50%;
margin: .2em;
transform: scale(.75);
outline-color: white;
}
.active{
transform: scale(1);
opacity: .25;
}
.dot:hover, .dot:hover, .dot:hover{
transform: scale(1);
opacity: .25;
transition: transform 1s ease-in;
transition: opacity .5s;
}
Javascript:
function buttonClick(){
var button = document.getElementsByClassName("dots");
var dot = button.children;
dot[0].classList.add("active");
for(var i = 0; i < dot.length; i++){
dot[i].addEventListener("click", function(){
var active = document.getElementsByClassName("active");
active[0].className = active[0].className.replace("active", "");
this.className += "active";
});
}
}
edit:
I have tried suggestions in the comments but the active class still does not get added to the active button, here is what my code looks like:
function buttonClick(){
var button = document.getElementsByClassName("dots");
var dot = button[0].children;
dot[0].classList.add("active");
for(var i = 0; i < dot.length; i++){
dot[i].addEventListener("click", function(){
var active = document.getElementsByClassName("active");
active[0].className = active[0].className.replace("active", "");
this.className += "active";
});
}
}
document.getElementsByClassName returns array.
Use button[0].children or button = document.getElementsByClassName("dots")[0]
I am not very good at vanilla javascript. I will do the equivalent of jQuery as follows
$('.dots').on('click', '.dot', function(e) {
el = $(this);
el.parents('.dots').find('dot').removeClass('active');
el.addClass('active');
});
Looks like you're adding eventListeners again and again.
Maybe try this approach, where you send the button element to the function using the "this" keyword....
(see fiddle: https://jsfiddle.net/sre1dua9/1/ )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ukiyo Sushi ツ</title>
<link href = "/style.css" type = "text/css" rel = "stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fira+Sans&display=swap" rel="stylesheet">
<script src = "/script.js"></script>
</head>
<body>
<!--<div class = "hero active">
<div class = "hero1">
<div class = "hero2">-->
<header id = "bg">
<nav class = "navbar">
Ukiyo Sushi ツ
<ul>
<li>About us</li>
<li>Menu</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class = "sushiPlatter">
<h2 id = "caption">Chef's Special Sushi Platter</h2>
<div class = "dots">
<button class = "dot" onclick="window.imgslider(this, 1)"></button>
<button class = "dot" onclick="window.imgslider(this, 2)"></button>
<button class = "dot" onclick="window.imgslider(this, 3)"></button>
</div>
View Menu
</div>
</header>
<!--</div>
</div>
</div>-->
<section class = "idkYet">
<div>
<span>hello I am filler content</span>
</div>
</section>
</body>
</html>
Then just track the last button clicked:
var lastDot = null;
window.imgslider = function(elem, x)
{
var bg = document.getElementById("bg");
var dot = document.getElementsByClassName("dot");
var caption = document.getElementById("caption");
switch(x){
case 1:
bg.style.backgroundImage = "-webkit-linear-gradient(rgba(0,0,0,.375), rgba(0,0,0,.375)),url(/img/header.jpg)";
caption.style.marginLeft = "0em";
caption.innerHTML = "Chef's Special Sushi Platter";
break;
case 2:
bg.style.backgroundImage = "-webkit-linear-gradient(rgba(0,0,0,.375), rgba(0,0,0,.375)),url(/img/pokebowl.jpg)";
caption.style.marginLeft = "2em";
caption.innerHTML = "Spring Poke Bowl";
break;
case 3:
bg.style.backgroundImage = "-webkit-linear-gradient(rgba(0,0,0,.375), rgba(0,0,0,.375)),url(/img/ramen.jpg)";
caption.style.marginLeft = "3.75em";
caption.innerHTML = "Miso Ramen";
}
// do dots
if(lastDot){
lastDot.classList.remove("active");
}
elem.classList.add("active");
// store last dot for next click
lastDot = elem;
}
I have a html form and one 'submit' button. I have two tabs that I want to do different things. One tab when submitting should go to one link, whereas the other tab should take the form to another link.
Here is my fiddle to show what I am working with :
https://jsfiddle.net/4s8qevz7/
I have tried putting in actions to go to for, (as of right now) generic links. But no luck.
<form style="margin-top:40px;" id="search-box" action="">
<div class="search-tab" data-search-type="catalog" action="http://catalog.com/" onClick="changePlaceholder(this)">Catalog </div>
<div class="search-tab selected" data-search-type="website" action="https://www.google.com/"onClick="changePlaceholder(this)">Website </div>
My expected results would be depending on the active tab, the form would respect that when the go button is clicked.
1) call preventDefault() in the form submit method
2) get active tab from event.target
3) call form.submit with the correct options based on the active tab.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.tab {
overflow: hidden;
/* Style the buttons that are used to open the tab content */
.tab button {
background-color: #f1f1f1;
float: left;
border: solid 1px #ccc;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
#search-text-form{
margin-top: 2rem;
}
#current-action-section{
margin-top: 2rem;
}
</style>
<script>
function openTab(evt, tabName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</head>
<body>
<section id="search-bar">
<div class="tab">
<button id="openByDefault" class="tablinks" onclick="openTab(event, 'Catalog')" data-action="http://catalog.com">Catalog</button>
<button class="tablinks" onclick="openTab(event, 'Website')" data-action="https://www.google.com">Website</button>
</div>
<div id="Catalog" class="tabcontent">
<h3>Catalog</h3>
<p>Catalog</p>
</div>
<div id="Website" class="tabcontent">
<h3>Website</h3>
<p>Website</p>
</div>
<form id="search-text-form">
<input type="text" id="search-text" placeholder="Search Website"><button id="go">Submit</button>
</form>
<script>
const form = document.getElementById('search-text-form');
form.onsubmit = e => {
e.preventDefault();
const activeTab = document.getElementsByClassName('tablinks active')[0];
const {action } = activeTab.dataset;
console.log(action);
document.getElementById('current-action').innerHTML = `Current Action: ${action}`;
// when you're ready, call whatever api is usually called in the submit function
}
document.getElementById("openByDefault").click();
</script>
</section>
<section id="current-action-section">
<h3 id="current-action"></h3>
</section>
<script>
var emailAddress = "jimmyleespann#outlook.com";
//email;
var text = "https://docs.google.com/forms/d/e/1FAIpQLSdFDFGDFVDGGjdfgdfgdx8P4DOw/viewform?usp=pp_url&entry.745541291="+room+"&entry.1045781291="+rr+"&entry.1065046570=4&entry.1166974658="+hr+"&entry.839337160="+spO2+"&entry.103735076=&entry.515842896="+e1Name+"&entry.631828469="+e1Reps+"&entry.1814472044="+e2Name+"&entry.905508655="+e2Reps+"&entry.1234390406="+isVol+"&entry.197252120="+education+"&entry.1748983288="+notes; var message = 'Dear ' + patientName + '\n\n' + "Thank you for submitting.\n\nHere is an autofill link: " + text; var subject = 'Submission Confirmation'; GmailApp.sendEmail(emailAddress, subject, message);
</script>
</body>
</html>
Updated JSFiddle code that I couldn't get to show up for OP:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
const state = {
targetUrl: 'https://www.google.com' // because this is the default selected tab
}
function setTargetUrl(url){
state.targetUrl = url;
}
function changePlaceholder(div) {
const searchTextEl = document.getElementById("search-text")
searchTextEl.placeholder = `Search ${div.innerHTML.trim()}`;
setTargetUrl(div.dataset.action);
}
function doSubmit(){
console.log('submitForm', state);
}
</script>
</head>
<body>
<form style="margin-top:40px;" id="search-box" onsubmit="submitForm">
<div
class="search-tab"
data-search-type="catalog"
data-action="http://catalog.com/"
onclick="changePlaceholder(this)">
Catalog
</div>
<div
class="search-tab selected"
data-search-type="website"
data-action="https://www.google.com/"
onclick="changePlaceholder(this)">
Website
</div>
<script>
</script>
<a href="t$003f/" target="_blank" style="text-decoration:none">
<div class="search-tab-link"> Login </div>
</a>
<div class="search-tab-content">
<div class="search-bar">
<input type="text" id="search-text" placeholder="Search Website" name="q">
<span id="search-text-icon" onclick="doSubmit()" style="cursor:pointer;">
<img
alt="go"
title="Search"
src="img/search.png"
style="height:1.2rem;"
>
</span>
</div>
<div id="search-old-catalog">
<a href="http://.com/" target="_blank">
Old Catalog
</a>
</div>
</form>
</body>
</html>
I couldn't get your jsfiddle to work, but here's an example of "2 actions within one form, one button." If the checkbox is checked, the action goes to bing.com, otherwise it goes to Wikipedia. Your if statement can use currentTarget as Dov Rine suggested, instead of a checkbox to dynamically change the form action.
function ActionSelect() {
if (document.getElementById('bing').checked) {
document.getElementsByTagName('form')[0]['action'] = 'https://bing.com';
}
}
<form style="margin:40px 50px;" action="https://www.wikipedia.org">
Choose your form action:<br/>
<input type="checkbox" id="bing"> Bing
<p>
<button type="submit" onclick="ActionSelect()">Submit</button>
</p>
</form>
this is the javascript and HTML and CSS I m very new to javascript the problem is if statement is always showing wrong even though it should not if statement is always false even if I click on the value of the color of win variable that the value of the 3rd index of the array colors its showing wrong
var colors = [
"rgb(255,0,0)",
"rgb(255,255,0)",
"rgb(0,255,0)",
"rgb(0,255,255)",
"rgb(0,0,255)",
"rgb(255,0,255)"
]
var win =colors[3];
var winclrdisplay=document.querySelector(".winclr");
var square= document.querySelectorAll(".square");
winclrdisplay.textContent=" "+ win;
for (var i = 0 ;i < square.length ; i++){
//colors
square[i].style.background =colors[i];
// click listener
square[i].addEventListener("click", function(){
var click = this.style.background;
if (click == win){
alert("correct");
}else{
alert("wrong");
}
}
);
}
body {
background-color: #232323;
}
.square{
width: 30%;
background: purple;
padding-bottom: 30%;
float: left;
margin: 1.66%;
}
#container {
max-width: 600px;
margin: 0 auto;
}
h1 {
color:white;
}
<html>
<head>
<title>color guessing game</title>
<link rel="stylesheet" type="text/css" href="colorapp.css">
</head>
<body>
<h1>The Great <span class="winclr"></span> colour Game</h1>
<div id="container">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<script type="text/javascript" src="colorapp.js"></script>
</body>
</html>
use element.getComputedStyle. element.style gets the value if the css style is inline. It is always false because it has no value.
something like this
var element = document.getElementById('box'),
style = window.getComputedStyle(element),
bg = style.getPropertyValue('background-color');
console.log(bg);
It is nearly impossible to understand your question as it is not well formatted. But from a quick look you are missing a closing ) in your if statment
if (click == "rgb(0,255,255"){
should be
if (click == "rgb(0,255,255)"){
or
if (click == rgb(0,255,255)){
(again, I'm not sure what your are aiming at)
Hey guys i was wondering if someone could help with some issues on my code.
Basically ive created 4 elements(divs) in an onclick event.From html i've also done so that same button dissapears
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="blackjack2.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="blackjack1.js"></script>
</head>
<body>
<button class= "boton" id="start">Play</button>
<button class= "boton" id="hit">Hit</button>
<button class= "boton" id= "stand">Stand</button>
<script type="text/javascript">
var jugar = document.getElementById('start')
var mas = document.getElementById('hit')
var mantener = document.getElementById('stand')
var cuerpo= document.getElementsByTagName('body')[0]
var crear_cartas= function() {
var card= document.createElement('div');
var texto =document.createTextNode("CASINO");
card.setAttribute("class","cartas");
card.appendChild(texto);
cuerpo.appendChild(card);
}
jugar.onclick= function(){
crear_cartas()
crear_cartas()
crear_cartas()
crear_cartas()
jugar.setAttribute('class','ocultar')
}
</script>
</body>
</html>
Up to there is ok , but im not sure if from jquery i can apply a filter that activates on the same onclick event that appears in javascript code (on those 4 created elements )to the even ones so that they make an animation lowering slightly the margin.
I've read about it but i am a bit at sea given that the filter would apply to created elements..
Thank you in advance guys
css class ".cartas" code included:
.cartas{
/*display: none;*/
margin: 260px 75px 0 75px;
display: inline-block;
border-radius: 10px;
border: 1px solid black;
padding-top: 50px;
height:100px;
width:100px;
color: #003366;
font-family: Muli,Helvetica Neue,Helvetica,sans-serif;
text-align: center;
background-color: #f0f8ff;
}
Add an onlcick event to all event divs. This event will add a class that will push the elements below those divs downward using a margin-bottom
Snippet below
var counter = 0;
var jugar = document.getElementById('start')
var mas = document.getElementById('hit')
var mantener = document.getElementById('stand')
var cuerpo = document.getElementsByTagName('body')[0]
var crear_cartas = function() {
card = document.createElement('div');
var texto = document.createTextNode("CASINO");
card.setAttribute("class", "cartas");
card.appendChild(texto);
cuerpo.appendChild(card);
}
jugar.onclick = function() {
for (var x = 0; x < 4; ++x) {
crear_cartas();
if ((x + 1) % 2 == 0) {
card.addEventListener('click', function() {
this.classList.add("move");
})
}
}
jugar.setAttribute('class', 'ocultar')
} //end func
div {
transition: margin-bottom 0.5s;
}
.move {
margin-bottom: 50px;
}
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="blackjack2.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="blackjack1.js"></script>
</head>
<body>
<button class="boton" id="start">Play</button>
<button class="boton" id="hit">Hit</button>
<button class="boton" id="stand">Stand</button>
</body>
</html>
The Goal:
A button which displays an alert with "Hello world!" and some radio buttons which display a warning when the third one is selected.
The HTML:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>hello world</title>
<link rel="stylesheet" href="style.css">
<meta name="description" content="">
</head>
<body>
<div id="main">
<p>text</p>
link
<button>button</button>
<form>
<fieldset>
<legend>Legend</legend>
<label for="radio1">Option 1</label>
<input type="radio" name="radio-buttons" value="option-1" id="radio1"/>
<label for="radio2">Option 2</label>
<input type="radio" name="radio-buttons" value="option-2" id="radio2"/>
<label for="radio3">Option 3</label>
<input type="radio" name="radio-buttons" value="option-3" id="radio3"/>
<p id="warn">No, pick another one.</p>
</fieldset>
</form>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
The CSS:
Most of this really doesn't matter. The important thing is #warn which is supposed to only show when the third option is selected.
a,
button {
display: block;
margin-bottom: 1em;
}
fieldset {
width: 245px;
height: 75px;
background: #dfe;
position: relative;
}
legend {
background: white;
}
#warn {
display: none;
background: #d33;
color: #fff;
font-family: helvetica;
padding: 10px 15px 10px;
margin: 0 -12px;
position: absolute;
top: 52px;
width: 239px;
}
The JavaScript:
I think the problem is in my event handlers, but I don't know for sure. BTW yes I know there's some extraneous stuff here; like I said I'm just screwing around.
// variables
var p = document.getElementsByTagName("p");
var a = document.getElementsByTagName("a");
var button = document.getElementsByTagName("button");
var fieldset = document.getElementsByTagName("fieldset");
var radio1 = document.getElementById("radio1");
var radio2 = document.getElementById("radio2");
var radio3 = document.getElementById("radio3");
var warn = document.getElementById("warn");
// functions
function prepareEventHandlers() {
button.onclick = function() {
alert("Hello world!")
};
radio3.onfocus = function() {
warn.setAttribute("display","inherit")
}
}
// window onload
window.onload = function() {
prepareEventHandlers();
}
Notice the name of the function:
document.getElementsByTagName()
// ^ That's an "s", so the function
// returns an array of elements.
button.onclick won't work because button is an array of buttons (I would name it buttons), so you have to iterate:
for (var i = 0; i < button.length; i++) {
button[i].onclick = ...
}
Since you have only one button, I would just give it an id and use document.getElementById() to fetch the single button and attach the onclick handler.
First, go fo button like this,
var button = document.getElementsByTagName("button")[0];
getElementsByTagName returns the array of matched elements...
For radio button
Try this
display is a CSS property. Using display as an HTML attribute will not hide or show content. You have to access CSS properties using style attribute. like,
radio3.onclick = function() {
warn.style.display = "inherit";
}