I use this to hide my answers from the flashcards. However, when I start up the webpage all the answers are showing and I have to manually hide them. HOw do I get everything hidden when I startup or open up the webpage.
I need the answers hidden
function myShowText(id) {
document.querySelector('#' + id + ' .answer').style.color = 'black';
}
function myHideText(id) {
document.querySelector('#' + id + ' .answer').style.color = 'white';
}
.answer {
border-style: solid;
border-color: #287EC7;
color: white;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Flashcards VBA </title>
<rel="stylesheet" href="css/styles.css">
</head>
<body>
<script src="js/scripts.js"></script>
<h3> Flashcards </h3>
<p class="question">
The first question
</p>
<div id="bash_start">
<p class="answer">
<img src="image.jpg">
</p>
</div>
</body>
</html>
Just add display: none in the css.
.answer {
border-style: solid;
border-color: #287EC7;
color: white;
display: none;
}
Hide the answer on window.onload
window.onload=function(){
document.querySelector('.answer').style.visibility = "hidden";
}
window.onload=function(){
document.querySelector('.answer').style.visibility = "hidden";
}
function myShowText(id) {
document.querySelector('#' + id + ' .answer').style.color = 'black';
}
function myHideText(id) {
document.querySelector('#' + id + ' .answer').style.color = 'white';
}
.answer {
border-style: solid;
border-color: #287EC7;
color: white;
}
<html lang="en">
<body>
<script src="js/scripts.js"></script>
<h3> Flashcards </h3>
<p class="question">
The first question
</p>
<div id="bash_start">
<p class="answer">
<img src="image.jpg">
</p>
</div>
</body>
</html>
You can try the below code. hideAnswers() should be called on page start script. Then you can display answers using showAnswers()
function hideAnswers(){
var answers = document.getElementsByClassName("answer");
var answer;
for(var i = 0; i <= answers.length-1; i++){
answer = answers[i];
answer.style.visibility = "hidden";
}
}
function showAnswers(){
var answers = document.getElementsByClassName("answer");
var answer;
for(var i = 0; i <= answers.length-1; i++){
answer = answers[i];
answer.style.visibility = "visible";
}
}
Related
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>
I am learning javascript and trying to do this with pure javascript..
I have created an input which when user fill and click on "Add Input Text" it will wrap the text into li tags and also add close button on the each input and add the input content to the div under it, I am using following code..
I am unable to make the close button work which are on the right side of each list items...
Please help.. Thanks
var inputBox = document.getElementById('input-box');
var inputDisplay = document.getElementById('input-display');
function clickme(){
if(inputDisplay.value == ""){
alert("please put something in the input field.");
}else
inputBox.innerHTML += "<li>" + inputDisplay.value + 'x</li>';
}
function clearInput(){
inputBox.innerHTML = "";
}
function delLast(){
if( inputBox.innerHTML === "") {
alert("There is nothing to delete");
}else{
var lastInputText = inputBox.lastChild;
lastInputText.remove();
}
}
var closeThis = document.getElementById("closebtn");
closeThis.addEventListener('click' , function(){
this.parentNode.remove();
});
.container{min-height:400px;width:100%;background-color:#999;color:#fff;float:left}.input-container{padding:10px;background-color:#777;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px}a#closebtn{background-color:#8B8B8B;float:right;padding:1px 3px;margin:0px;color:#fff;text-decoration:none}#input-box{list-style-type:none}#input-box li{color:#FFF;background-color:#404040;padding:5px;width:300px;margin:0px;float:left;clear:both;margin-bottom:10px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript-learning</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="container">
<div class="input-container">
<input type="text" id="input-display">
<button onclick = "clickme()">Add input text</button>
<button onclick= "clearInput()">clear Input Box</button>
<button onclick= "delLast()">Del Last</button>
</div> <!--input-container -->
<div id ="main-content-container">
<ul id= "input-box">
</ul>
</div> <!--input-box -->
<div class="array-div">
</div>
</div> <!-- container -->
<!-- javascripts -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/underscore/underscore.min.js"></script>
<script src="bower_components/backbone/backbone-min"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
you need to add a onclick event on your x link and pass the element as parameter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript-learning</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="container">
<div class="input-container">
<input type="text" id="input-display">
<button onclick = "clickme()">Add input text</button>
<button onclick= "clearInput()">clear Input Box</button>
<button onclick= "delLast()">Del Last</button>
</div> <!--input-container -->
<div id ="main-content-container">
<ul id= "input-box">
</ul>
</div> <!--input-box -->
<div class="array-div">
</div>
</div> <!-- container -->
<!-- javascripts -->
<script>
var inputBox = document.getElementById('input-box');
var inputDisplay = document.getElementById('input-display');
function clickme(){
if(inputDisplay.value == ""){
alert("please put something in the input field.");
}else
inputBox.innerHTML += "<li>" + inputDisplay.value + 'x</li>';
}
function clearInput(){
inputBox.innerHTML = "";
}
function delLast(){
if( inputBox.innerHTML === "") {
alert("There is nothing to delete");
}else{
var lastInputText = inputBox.lastChild;
lastInputText.remove();
}
}
var closeThis = document.getElementById("closebtn");
closeThis.addEventListener('click' , function(){
this.parentNode.remove();
});
function close_click(elem)
{
elem.parentNode.remove();
}
</script>
</body>
</html>
i added close_click function in javascript that is being called in every of your created close button.
Change closebtn from an id to a class, because ids must be unique.
You can then replace the closebtn click handler with a delegated event on document.body:
document.body.addEventListener('click', function(event) {
if(event.target.className==='closebtn') {
event.target.parentNode.remove();
}
});
event.target will be the element that has been clicked.
Snippet
var inputBox = document.getElementById('input-box');
var inputDisplay = document.getElementById('input-display');
function clickme(){
if(inputDisplay.value == ""){
alert("please put something in the input field.");
}else
inputBox.innerHTML += "<li>" + inputDisplay.value + 'x</li>';
}
function clearInput(){
inputBox.innerHTML = "";
}
function delLast(){
if( inputBox.innerHTML === "") {
alert("There is nothing to delete");
}else{
var lastInputText = inputBox.lastChild;
lastInputText.remove();
}
}
document.body.addEventListener('click', function(event) {
if(event.target.className==='closebtn') {
event.target.parentNode.remove();
}
});
.container{min-height:400px;width:100%;background-color:#999;color:#fff;float:left}.input-container{padding:10px;background-color:#777;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px}a.closebtn{background-color:#8B8B8B;float:right;padding:1px 3px;margin:0px;color:#fff;text-decoration:none}#input-box{list-style-type:none}#input-box li{color:#FFF;background-color:#404040;padding:5px;width:300px;margin:0px;float:left;clear:both;margin-bottom:10px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript-learning</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="container">
<div class="input-container">
<input type="text" id="input-display">
<button onclick = "clickme()">Add input text</button>
<button onclick= "clearInput()">clear Input Box</button>
<button onclick= "delLast()">Del Last</button>
</div> <!--input-container -->
<div id ="main-content-container">
<ul id= "input-box">
</ul>
</div> <!--input-box -->
<div class="array-div">
</div>
</div> <!-- container -->
<!-- javascripts -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/underscore/underscore.min.js"></script>
<script src="bower_components/backbone/backbone-min"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
You need to add the click handler after creating the close button
var inputBox = document.getElementById('input-box');
var inputDisplay = document.getElementById('input-display');
function clickme() {
if (inputDisplay.value == "") {
alert("please put something in the input field.");
} else {
//create a new li
var li = document.createElement('li');
//add the input text to it as text
li.appendChild(document.createTextNode(inputDisplay.value));
//create a new anchor
var a = document.createElement('a');
a.href = "#";
//since id of an element must be unique, use classname
a.className = 'closebtn';
//add the click handler
a.addEventListener('click', closeHandler);
//add the anchor to li
li.appendChild(a);
//add the li to the ul
inputBox.appendChild(li);
}
}
function closeHandler() {
this.parentNode.remove();
}
function clearInput() {
inputBox.innerHTML = "";
}
function delLast() {
if (inputBox.innerHTML === "") {
alert("There is nothing to delete");
} else {
var lastInputText = inputBox.lastChild;
lastInputText.remove();
}
}
.container {
min-height: 400px;
width: 100%;
background-color: #999;
color: #fff;
float: left
}
.input-container {
padding: 10px;
background-color: #777;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px
}
a.closebtn {
background-color: #8B8B8B;
float: right;
padding: 1px 3px;
margin: 0px;
color: #fff;
text-decoration: none
}
#input-box {
list-style-type: none
}
#input-box li {
color: #FFF;
background-color: #404040;
padding: 5px;
width: 300px;
margin: 0px;
float: left;
clear: both;
margin-bottom: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript-learning</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="container">
<div class="input-container">
<input type="text" id="input-display">
<button onclick="clickme()">Add input text</button>
<button onclick="clearInput()">clear Input Box</button>
<button onclick="delLast()">Del Last</button>
</div>
<!--input-container -->
<div id="main-content-container">
<ul id="input-box">
</ul>
</div>
<!--input-box -->
<div class="array-div">
</div>
</div>
<!-- container -->
<!-- javascripts -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/underscore/underscore.min.js"></script>
<script src="bower_components/backbone/backbone-min"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
I'm trying to create a quiz for an online bootcamp. I'm trying to make it so that when the user clicks a true or false radio button and then clicks the "next" button, the score is updated and the next question is displayed. I'm trying to use line 30-32 of the Javascript to do this, but am not quite sure how to implement it. It is currently preventing my app from running when it is not commented out.
Here's my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="quiz.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="quiz.js"></script>
<title>Pokemon Quiz</title>
</head>
<body>
<h1>Pokemon Quiz! Test your skill!</h1>
<button id="reset" type="button">Reset Quiz</button>
<form>
<h3 class="anchor"></h3><br>
<input type="radio" name="T/F" id="true">True<br>
<input type="radio" name="T/F" id="false">False
<br><button type="button" id="next">Next/Start</button><br>
</form>
<p>Score: <span id="score">0</span></p>
<p>Question No. <span id="questionnum">0</span></p>
</body>
</html>
CSS:
body {
color: #00CCFF;
background-image: url(http://i.ytimg.com/vi/vyY0jRjrTy4/maxresdefault.jpg);
margin-left: 500px;
margin-top: 300px;
}
form {
margin-left: 45px;
}
input {
color: red;
margin-left: 100px;
}
P {
color: yellow;
margin-left: 150px;
}
#next {
margin-left: 100px;
color: red;
}
#reset {
margin-left: 135px;
color: red;
}
Javascript:
$( document ).ready(function() {
//game();
questionNumber = 0;
score = 0;
if (questionNumber < questions.length) {
$('#next').click(function(){
game();
questionNumber ++;
});
};
$('#reset').click(function(){
neu();
game();
});
});
function neu() {
questionNumber = 0;
score = 0;
}
function game() {
console.log(questionNumber);
$("h3.anchor").html(questions[questionNumber]);
//if radiobutton value == answers[questionNumber]
if ((document.getElementById("true").checked && answers[questionNumber] == true) || (document.getElementById("false").checked && answers[questionNumber] == false) {
score ++;
}
/*
if(document.getElementById("next").clicked == true) {
if(document.getElementById("true").checked) {
score++;
console.log(score);
}
console.log(score);
$(".anchor").html("There are 9 certified Pokemon League badges?");
}
*/
}
//Use use question number to access array values (questions)
//consider using object instead of array to allow for boolean values
//var questions = [];
questions = ["Caterpie evolves into Metapod?",
"There are 9 certified Pokemon League badges?",
"Poliwag evolves 3 times?",
"Are thunder moves effective against ground-type Pokemon?",
"Pokemon of the same kind and level are not identical?",
"TM28 contains Tombstony?"];
answers = [true, false, false, false, true, false];
I'm trying to get all title out of body text.
I created a button and linked my function to it.
However, when I click on it, it disappears and I want it to stay in the same place because I will add other buttons with other functions.
Do you know any idea how I could keep it always in there?
I tryed to use fixed position but soon realised that it just fixes the button on top if I scroll down for example.
Also, when I get the titles my text is in different shrift, I just wonder why is that?
Your guidance will be appreciated.
This is what I have at the moment:
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
#navigation li{
display:inline;
postion:absolute;
}
#navigation a{
padding:2px 2px;
background-color:#09F;
color:#FFFFFF;
}
#navigation a:hover{
background-color:#F90;
color:#666;
}
</style>
<div id="navigation">
<a href="#"><input type=button onclick="myFunction()">
</div>
</head>
<body>
<div>
<p id="demo">
<pre>
<b>This is one title</b>
I'm writing here
the text that I
don't need to get.
<b>Other title</b>
And so we'll test
whether this thing works.
</p>
</pre>
</div>
<script>
function myFunction() {
var text = document.body.innerText;
var titles =text.match(/^\n(.+?)\n\n/mg);
for (var i = 0; i < titles.length; i++) {
document.write(titles[i] + "<br />" + "<br />");
}
}
</script>
</body>
</html>
Basically you have an opening <a> tag but not a closing one. That makes your whole website a link. But apart from that you had a lot of invalid HTML. Closing tags that were mixed up and HTML between </head> and <body>.
Your HTML should look like:
<html>
<head>
<meta charset="utf-8"/>
<title>test</title>
<style>
#navigation li{
display:inline;
postion:absolute;
}
#navigation a{
padding:2px 2px;
background-color:#09F;
color:#FFFFFF;
}
#navigation a:hover{
background-color:#F90;
color:#666;
}
</style>
</head>
<body>
<div id="navigation">
<input type=button onclick="myFunction()" />
</div>
<div>
<p id="demo">
<pre>
<b>This is one title</b>
I'm writing here
the text that I
don't need to get.
<b>Other title</b>
And so we'll test
whether this thing works.
</pre>
</p>
</div>
<script>
function myFunction() {
var text = document.body.innerText;
var titles =text.match(/^\n(.+?)\n\n/mg);
for (var i = 0; i < titles.length; i++) {
document.write(titles[i] + "<br />" + "<br />");
}
}
</script>
</body>
</html>
Here you go. I have fixed the HTML, made it more semantic (by removing the onclick from the HTML), and made the algorithm simpler by using document.getElementsByTagName().
New code:
var r = document.getElementById('results');
document.getElementById('btn').onclick = myFunction;
function myFunction() {
var titles = document.getElementsByTagName('b');
for (var i = 0; i < titles.length; i++) {
r.innerHTML += titles[i].innerHTML + "<br />" + "<br />";
}
}
Right now I have a base html page that gets the most popular videos using youtubes api. So far it displays the title of the videos but i'm trying to make those titles clickable. If the title was clicked they would then just be brought to the video on actual youtube. I know that I could theoretically just find the most popular videos then do a clickable link but I want this to more or less auto update everytime a new popular video gets found with the youtube api. Right now I have this basic code.
<html>
<head>
<title>My Videos</title>
<style>
.titlec {
font-size: small;
}
ul.videos li {
float: left;
width: 10em;
margin-bottom: 1em;
}
ul.videos {
margin-bottom: 1em;
padding-left : 0em;
margin-left: 0em;
list-style: none;
}
</style>
<script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script>
<script type="text/javascript">
function showData(data) {
var feed = data.feed;
var entries = feed.entry || [];
var html = ['<ul class="videos">'];
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var title = entry.title.$t.substr(0, 20);
// var thumbnailUrl = entries[i].media$group.media$thumbnail[0].url;
html.push('<span class="titlec">', title, '...</span><br /></span></li>');
}
// html.push('</ul><br style="clear: left;"/>');
document.getElementById('videos2').innerHTML = html.join('');
if (entries.length > 0) {
loadVideo(entries[0].media$group.media$content[0].url, false);
}
}
</script>
</head>
<body>
<div id="playerContainer" style="width: 20em; height: 180px; float: left;">
<object id="player">
</object>
</div>
<div id="videos2"></div>
<script
type="text/javascript"
src="http://gdata.youtube.com/feeds/api/standardfeeds/most_popular?time=this_week&alt=json-in-script&callback=showData&max-results=10&format=5">
</script>
</body>
</html>
I am not sure if I exactly understand what you are trying to achieve but I have created a jsfiddle!
Here is the code:
<html>
<head>
<title>My Videos</title>
<script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script>
<script type="text/javascript">
function showData(data) {
var feed = data.feed;
var entries = feed.entry || [];
var html = ['<ul class="videos">'];
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var title = entry.title.$t.substr(0, 20);
html.push('<li class="titlec">' + title + '</li>');
}
document.getElementById('videos2').innerHTML = html.join('') + '</ul>';
if (entries.length > 0) {
loadVideo(entries[0].media$group.media$content[0].url);
}
}
function loadVideo(e) {
var container = document.getElementById('playerContainer');
var player = document.getElementById('player');
container.removeChild(player);//remove object child
player.setAttribute('data',e);//change link
container.appendChild(player);//add object back
}
</script>
</head>
<body>
<div id="playerContainer" style="width: 20em; height: 180px; float: left;">
<object id="player"></object>
</div>
<div id="videos2"></div>
<script type="text/javascript" src="http://gdata.youtube.com/feeds/api/standardfeeds/most_popular?time=this_week&alt=json-in-script&callback=showData&max-results=10&format=5">
</script>
</body>