I want to make an alarm which starts and stop after some time. So I put setInterval in code. Also I want to show a message when the alarm rings. For this, I make a text in my last div and make it hide by jQuery hide(). Here in my code, p.show doesn't hide by jQuery hide() .
<!DOCTYPE html>
<html>
<head>
<title>My Rest Alarm</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<form class="form-inline">
<div class="form-group">
<label for="sel1">Alarm will ring after :</label>
<input type="text" class="form-control" id="minute"> minute
</div>
</form>
</div>
<div class="row">
<div class="alarm" style="display:none;"></div>
<button class="btn btn-success start"> Start </button>
<button class="btn btn-danger stop"> Stop </button>
</div>
<div class="row">
<center><p><b id="clock"></b></p></center>
</div>
<div class="row">
<p class="show">It's time to rest</p>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("p.show").hide();
//show clock
var myVar = setInterval(myTimer ,1000);
function myTimer() {
var d = new Date();
document.getElementById("clock").innerHTML = d.toLocaleTimeString();
}
//start alarm
var alarm;
$("button.start").click(function(){
var alarmVal = $("input").val();
//console.log(alarmVal*60000);
$("p.show").delay(alarmVal*60000).fadeIn();
alarm = setInterval(function(){
//alert("Hello");
$('div.alarm').append("<audio autoplay><source src='http://soundbible.com/mp3/A-Tone-His_Self-1266414414.mp3' type='audio/mpeg'></audio>");
},
alarmVal*60000);
});
//stop alarm
$("button.stop").click(function(){
clearInterval(alarm);
$("p.show").fadeOut();
});
});
</script>
</body>
</html>
Why doesn't it hide?
It doesn't work because Bootstrap also uses the class .show and sets the style
display : block!important;
on it, and !important styles override inline styles.
To fix the issue, just use a className other than .show
Related
I'm exploring a mixture of codes in javascript, HTML, CSS, and bootstrap. I tried to clear a page through a button click--> document.write(''), then kinda tried to repaint another button. Kindly explain where I've gone wrong, if this is a good practice or not. Sorry, if this is silly. On clicking button one, two things happen: 1) Page is cleared 2) The visibility property of the second button is changed by changing its class name (invoking the new class name's style property)
<style type="text/css">
.bn{visibility:hidden;}
.btn{visibility:visible;}
</style>
<script type="text/javascript">
function newpg(){
document.write('');
document.getElementById('two').className="btn";}
</script>
</head><body>
<div class="container">
<div class="row">
<div class="col-md-6"> <!--some content-->
<button id="one" onclick="newpg()">CLEAR &SHOW THE HIDDEN BUTTON</button>
<button class="bn" id="two">I'M HERE</button>
</div></div></div> <!--bootstrap code inclusion-->
</body></html>
As stated in my comment display none removes all the content of the page. You then try to find a button you just removed. It is not going to work.
You need to hide the element with JavaScript. You can easily do that by setting the display property.
Since you are using bootstrap, you should be toggling their classes. Either you toggle d-none or invisible
const btn1 = document.getElementById('one');
const btn2 = document.getElementById('two');
function newpg(evt) {
evt.preventDefault();
btn1.classList.add('d-none');
btn2.classList.remove('d-none');
}
btn1.addEventListener("click", newpg);
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-6">
<!--some content-->
<button id="one">CLEAR &SHOW THE HIDDEN BUTTON</button>
<button class="d-none" id="two">I'M HERE</button>
</div>
</div>
</div>
Bootstrap 3
const btn1 = document.getElementById('one');
const btn2 = document.getElementById('two');
function newpg(evt) {
evt.preventDefault();
btn1.classList.add('hidden');
btn2.classList.remove('hidden');
}
btn1.addEventListener("click", newpg);
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-6">
<!--some content-->
<button id="one">CLEAR &SHOW THE HIDDEN BUTTON</button>
<button class="hidden" id="two">I'M HERE</button>
</div>
</div>
</div>
Using document.write('') you're actually deleting every HTML element on your page, So there remains no element to be shown next. You should use another function to just eliminate the button with id one instead of deleting everything. I suggest document.getElementById('one').style.display="none". So the code would be something like this:
<style type="text/css">
.bn{visibility:hidden;}
.btn{visibility:visible;}
</style>
<script type="text/javascript">
function newpg() {
document.getElementById('one').style.display="none";
document.getElementById('two').className="btn";
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6"> <!--some content-->
<button id="one" onclick="newpg()">
CLEAR &SHOW THE HIDDEN BUTTON
</button>
<button class="bn" id="two">I'M HERE</button>
</div></div></div> <!--bootstrap code inclusion-->
</body>
I'm not sure what you are trying to do by clearing the whole page, but it's probably not doing what you think it's doing.
document.write(''); // this indeed clear the whole HTML page
document.getElementById('two') // #two doesn't exist anymore since the page is now blank
Maybe you just want to display/hide elements?
Then I would suggest using the CSS display property.
I know this is a basic questions, but I am working on making a dynamic form and was having a bit of trouble figuring out how to delete elements that share the same class. I have looked around on the web and other posts for a means to accomplish this, but still was unable to figure it out.
I am new to this so I apologize for the basic question. Below, I have pasted the relevant code and my attempt at this. Would anyone be able to assist me?
var ingCounter = 1;
var dirCounter = 1;
var limit = 10;
function addIngredient(divName){
if (ingCounter == limit) {
alert("You have reached the add limit");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "<div class='ingredientSet'><input class='ingredientInput' type='text' name='ingredients[]'><button class='deleteIngredientButton' type='button' onClick='removeElement('directionSet');'>X</button></div>";
document.getElementById(divName).appendChild(newdiv);
ingCounter++;
}
}
function addDirection(divName){
if (dirCounter == limit) {
alert("You have reached the add limit");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "<div class='directionSet'><input class='directionInput' type='text' name='directions[]'><button class='deleteDirectionButton' type='button'>X</button></div>";
document.getElementById(divName).appendChild(newdiv);
dirCounter++;
}
}
function removeElement(elementId) {
// Removes an element from the document
var element = document.getElementById(elementId);
element.parentNode.removeChild(element);
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homemade</title>
<!-- Required program scripts -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<!-- Style Sheets-->
<link rel="stylesheet" href="/styles/navBarStyle.css">
<link rel="stylesheet" href="/styles/myRecipesStyle.css">
<link rel="stylesheet" href="/styles/createRecipeStyle.css">
<link rel="stylesheet" href="/styles/errorMessageStyle.css">
</head>
<body>
<!-- Background image -->
<img id="background" src="/images/foodBackground.jpg" alt="">
<div id="newRecipeContainer">
<div id="closeButtonContainer">
<div id="backButton"><a id="back" href="/recipes/myRecipes">← My Recipes</a></div>
</div>
<form id="createRecipeForm" action="/recipes/createRecipe" method="POST" enctype="multipart/form-data">
<label id="formSubHeading">Create Your Homemade Recipe</label>
<%- include('../_partial/_messages'); -%>
<div id="recipeNameContainer">
<label id="recipeNameLabel">Title</label>
<input id="recipeNameInput" type="text" name="recipeName">
</div>
<div id="recipeImage">
<label id="recipeImageLabel">Add An Image of Your Meal</label>
<input id="recipeImageInput" type="file" accept="image/*" name="recipeImage"/>
<label id="recipeImageInputLabel" for="recipeImageInput" name="recipeImage">Choose A File</label>
</div>
<div id="recipeDescription">
<label id="recipeDescriptionLabel">Description</label>
<textarea id="recipeDescriptionInput" name="recipeDescription" cols="30" rows="10" maxlength="2000"></textarea>
</div>
<div class="ingredientsContainer">
<label id="ingredientsLabel">Ingredients</label>
<button id="addIngredientButton" type="button" onClick="addIngredient('allIngredients');">Add Another Ingredient</button>
<div id="allIngredients">
<div class="ingredientSet">
<input class="ingredientInput" type="text" name="ingredients[]">
</div>
</div>
</div>
<div class="directionsContainer">
<label id="directionsLabel">Directions</label>
<button id="addDirectionButton" type="button" onClick="addDirection('allDirections');">Add Another Direction</button>
<div id="allDirections">
<div class="directionSet">
<input class="directionInput" type="text" name="directions[]">
</div>
</div>
</div>
<div id="createRecipeButtonContainer">
<button id="createRecipeButton" type="submit">Create Recipe</button>
</div>
</form>
</div>
</body>
<!-- Required scripts to run app -->
<script src="/controls/newRecipeControl.js"></script>
<script src="/controls/errorMessageControl.js"></script>
</html>
Thanks for any help.
In your code you are using getElementById but there is no id called directionSet its a class.
You can simply use parentElement and remove to remove the newly added dynamic inputs by calling an onClick function.
In the onClick function removeElement() - this refers to the elements we have clicked and it will remove from the form.
var ingCounter = 1;
var dirCounter = 1;
var limit = 10;
function addIngredient(divName) {
if (ingCounter == limit) {
alert("You have reached the add limit");
} else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "<div class='ingredientSet'><input class='ingredientInput' type='text' name='ingredients[]'><button class='deleteIngredientButton' type='button' onClick='removeElement(this);'>X</button></div>";
document.getElementById(divName).appendChild(newdiv);
ingCounter++;
}
}
function addDirection(divName) {
if (dirCounter == limit) {
alert("You have reached the add limit");
} else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "<div class='directionSet'><input class='directionInput' type='text' name='directions[]'><button class='deleteDirectionButton' onClick='removeElement(this);' type='button'>X</button></div>";
document.getElementById(divName).appendChild(newdiv);
dirCounter++;
}
}
function removeElement(elementId) {
// Removes an element from the document
elementId.parentElement.remove()
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homemade</title>
</head>
<body>
<!-- Background image -->
<div id="newRecipeContainer">
<div id="closeButtonContainer">
<div id="backButton"><a id="back" href="/recipes/myRecipes">← My Recipes</a></div>
</div>
<form id="createRecipeForm" action="/recipes/createRecipe" method="POST" enctype="multipart/form-data">
<label id="formSubHeading">Create Your Homemade Recipe</label>
<div id="recipeNameContainer">
<label id="recipeNameLabel">Title</label>
<input id="recipeNameInput" type="text" name="recipeName">
</div>
<div id="recipeImage">
<label id="recipeImageLabel">Add An Image of Your Meal</label>
<input id="recipeImageInput" type="file" accept="image/*" name="recipeImage" />
<label id="recipeImageInputLabel" for="recipeImageInput" name="recipeImage">Choose A File</label>
</div>
<div id="recipeDescription">
<label id="recipeDescriptionLabel">Description</label>
<textarea id="recipeDescriptionInput" name="recipeDescription" cols="30" rows="10" maxlength="2000"></textarea>
</div>
<div class="ingredientsContainer">
<label id="ingredientsLabel">Ingredients</label>
<button id="addIngredientButton" type="button" onClick="addIngredient('allIngredients');">Add Another Ingredient</button>
<div id="allIngredients">
<div class="ingredientSet">
<input class="ingredientInput" type="text" name="ingredients[]">
</div>
</div>
</div>
<div class="directionsContainer">
<label id="directionsLabel">Directions</label>
<button id="addDirectionButton" type="button" onClick="addDirection('allDirections');">Add Another Direction</button>
<div id="allDirections">
<div class="directionSet">
<input class="directionInput" type="text" name="directions[]">
</div>
</div>
</div>
<div id="createRecipeButtonContainer">
<button id="createRecipeButton" type="submit">Create Recipe</button>
</div>
</form>
</div>
</body>
</html>
I have a simple bootstrap page. It is the beginning of a bigger projects for kids where I will be asking them to click on a button to start a quiz. I am not able to display the quiz using the Javascript: document.getElementById("message").innerHTML = "Quiz String";. I am trying to do that using addEventListener. I am not sure what went wrong. Here is my entire code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Quiz Page.</title>
<!-- Bootstrap -->
<link href="css/bootstrap-4.2.1.css" rel="stylesheet">
<style>
.TopDivMarg {
margin-bottom: 50px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 TopDivMarg"></div>
</div>
<!-- Quiz Group -->
<div class="row">
<div class="col-xl-4"></div>
<div class="col-xl-4">
<p id="message" class="text-center">Click Button to Start Quiz.</p>
</div>
<div class="col-xl-4"></div>
</div>
<!-- Button Group -->
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<button type="button" class="btn btn-info">Start Quiz</button>
</div>
<div class="col-md-4"></div>
</div>
<script>
button.addEventListener("click",
function (changeText){
document.getElementById("message").innerHTML = "What are the colors of the rainbow?";
});
</script>
There is no button assigned an id of 'message'
Start Quiz
Try this in the JS.
var submitButton = document.querySelector('.btn-info');
submitButton.addEventListener("click", function (changeText) {
document.getElementById("message").innerHTML = "What are the colors of the rainbow?";
});
We are search for a button with the class 'button-info' and adding the event listener to it.
As you said It is a big project. You should never add event listener to the bootstrap classes which won't be unique in your code going forward.
Use Id instead.
<button type="button" class="btn btn-info" id="btn-quiz-start">Start Quiz</button>
var submitButton = document.querySelector('#btn-quiz-start');
first need to get the reference of the button before add the event listener:
<!-- Button Group -->
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<button id="button" type="button" class="btn btn-info">Start Quiz</button>
</div>
<div class="col-md-4"></div>
</div>
<script>
const button = document.getElementById("button");
button.addEventListener("click", function(changeText){
document.getElementById("message").innerHTML =
"What are the colors of the rainbow?";
});
</script>
I have a todo app.
I managed to make it show an input when pressing the add button and to delete randomly, but when I click the done button I want to change the li element class to a class that has css background color red, but it doesn't work. I tried with jquery but it still doesn't work. The red background suggests that the task is done.
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" type="text/css" href="stil.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="centru">
<div class="row">
<div class="col-lg-12">
<h2>TO DO LIST</h2>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<input type="text" class="form-control" id="usr" placeholder="Input task...">
</div>
<div class="col-lg-6">
<button type="button" class="btn btn-primary" onclick="adauga()">Add task</button>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<ul class="list-group" id="lista1">
</ul>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
script.js
function adauga() {
var inp = document.getElementById('usr').value;
var list = document.getElementById('lista1');
var li = document.createElement('li');
var lungime = document.getElementById("lista1").getElementsByTagName('li').length;
for(var i = 0; i < lungime ; i++) {
li.setAttribute("id",i);
}
li.appendChild(document.createTextNode(inp));
var button = document.createElement("button");
button.innerHTML = "Delete";
button.setAttribute("class","btn btn-primary ste");
button.setAttribute("onclick","sterge()");
//button.setAttribute("class","ste");
li.appendChild(button);
list.appendChild(li);
//////////////////////////////////////
var button2 = document.createElement("button");
button2.innerHTML = "Done";
button2.setAttribute("class","btn btn-primary done");
button2.setAttribute("onclick","done()");
li.appendChild(button2);
list.appendChild(li);
}
function change() {
li.setAttribute("class","xxx");
}
function sterge() {
$('body').on('click','.ste', function(){
$(this).parent().remove();
});
}
function done() {
$('body').on('click','done',function(){
$(this).parent().setAttribute("class","btn btn-primary done xxx");
});
}
stil.css
.centru {
width: 600px ;
margin-left: auto ;
margin-right: auto ;
}
.lix {
padding-right: 20px;
}
.xxx {
background-color: red;
color:red;
}
you can use addClass function on done function like this
function done() {
$('body').on('click','.done',function(){
$(this).parent().addClass("btn btn-primary done xxx");
});
}
I am using the following Flip JQuery plugin:
http://lab.smashup.it/flip/
I was able to get it to work but there are issues with using it on my site. How can I create something from scratch where on click of a button i can flip a div and then on clicking another it can revert to the old state.
Below is what I had using Flip but need to start from scratch.
Code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="container">
<div class="real_thing" id="flipbox">
<a href="#" id="email_flip">
<div class="button1">
<span class="line_text">
Button 1
</span>
</div>
</a>
<div class="button2">
<span class="line_text">
Button 2
</span>
</div>
<div class="button3">
<span class="line_text">
Button 3
</span>
</div>
</div>
Flip
Revert
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.flip.js"></script>
<script type="text/javascript">
$("#clicker2").click(function(){
$("#flipbox").revertFlip();
});
</script>
<script type="text/javascript">
function flip() {
$("#email_flip").click(function()
{
$("#flipbox").flip({
direction: 'tb',
content: '<input type="text" placeholder="Email"> <input type="text" placeholder="Password">',
})
}
)
}
$(document).ready(function() {
$("#flipbox").on("focus", function(){flip();});
flip();
});
</script>
</body>
</html>