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>
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.
Here is my code: When I click on one button, it hide all links. And show on one button also. Links and titles are lists which change their lengths in python. I want to show the link of only button which is clicked not all. I have also tried using div but also same problem.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Python Jobs</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.3/css/bulma.min.css">
<section class="hero is-dark is-bold">
<div class="hero-body">
<p class="title">
Job Title
</p>
<p class="subtitle">
Python jobs
</p>
</div>
</section>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("a").hide();
});
$("#show").click(function(){
$("a").show();
});
})
</script>
</head>
<body>
<section class="section">
<div class="container">
{% for i in range(0, len-1) %}
<h3>{{i+1}}. {{title[i]}}</h3>
<a href={{links[i]}}>{{links[i]}}</a>
<button id="show">Show</button>
<button id="hide"> Hide</button>
<br>
{% endfor %}
</div>
</section>
</body>
</html>
There are multiple problem in your code.
id must be unique so use class instead of id.
Wrap your each heading and link with container. In your case move your div inside for loop.
Based upon your button click find your heading and link to show / hide.
Initially hide your heading and link (It's depend upon your logic, how you want to present UI)
Example:
$(".hide").click(function() {
$(this).parent('div').find('a ,h3').hide();
});
$(".show").click(function() {
$(this).parent('div').find('a ,h3').show();
});
a,
h3 {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<h3>Title1</h3>
Link1
<button class="show">Show</button>
<button class="hide"> Hide</button>
</div>
<div class="container">
<h3>Title2</h3>
Link2
<button class="show">Show</button>
<button class="hide"> Hide</button>
</div>
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 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
I want to make a webpage in which three different contents show/hide when a button is clicked. The code is shown below.
I want the same page to show three contents:
only a search bar when button 'search' is clicked,
only the result of the search after a search is done or when the button 'results' is clicked, and
only the visualization of the search when one specific outcome of the results is chosen, or when the button 'visualization' is clicked.
Right now I only know how to show the results in different pages, not in the same one hiding what I don't want.
Code is below.
Thanks
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="docs-assets/ico/favicon.png">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link href="css/jumbotron-narrow.css" rel="stylesheet">
<link href="css/jquery.dataTables.css" rel="stylesheet">
<link rel="shortcut icon" type="image/ico" href="" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" language="javascript" src="js/libs/jquery-2.0.3.min.js"></script>
<script type="text/javascript" language="javascript" src="js/libs/jquery.sprintf.js"></script>
<script type="text/javascript" language="javascript" src="js/libs/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
//xmakeTable("treaty");
});
makeTable = function(query) {
var q = encodeURIComponent(query)
$('#example').dataTable({
"oLanguage": {"sSearch": "Filter results:"},
"bProcessing": true,
"bDestroy":true,
"sAjaxSource": $.sprintf('http://leela.sscnet.ucla.edu/voteview/searchdt?q=%s',q),
"aoColumns":[{"mData":"id", "sWidth": "20px", "sTitle":"ID"},
{"mData":"chamber", "sWidth": "10px", "sTitle":"Chamber"},
{"mData":"date", "sWidth": "85px", "sTitle":"Date"},
{"mData":"yea","sTitle":"Vote","sWidth":"80px"},
{"mData":"descriptionShort", "sWidth": "200px","sTitle":"Description"}],
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
$('td:eq(0)', nRow).html(
$.sprintf('%s',aData['id'],aData['id'])).attr("title","Click to explore this vote");
$('td:eq(3)', nRow).html(
$.sprintf('%s-%s',aData['yea'],aData['no']));
$('td:eq(4)', nRow).attr("title",aData['description'])
return nRow; }
});
}
searchvotes = function() {
$('#example').empty();
makeTable($('#qqtext').val());
};
</script>
</head>
<body>
<div class="container">
<div class="header">
<ul class="nav nav-pills pull-right">
<li>Home</li>
<li class="active">Search</li>
<li>Contact</li>
</ul>
<h3 class="text-muted">VoteView</h3>
</div>
<div class="jumbotron">
<div class="container">
<div>
<h3 align="center">Search for Roll Calls</h3>
<div class="col-sm-12">
<input type="search" class="form-control" placeholder="Search" id="qqtext" onchange="searchvotes()"></input>
</div>
</div>
<br>
<div>
<div class="table-responsive">
<table id="example" class="table table-striped"></table>
</div>
</div>
<div>
<div class="col-lg-14 col-md-14 portfolio-item" id="example">
</div>
</div>
</div>
</div>
<div align="center">
<button type="button" class="btn btn-primary btn-lg">
<span class="glyphicon glyphicon-search"></span><br><font color="white">Search</font>
</button>
<button type="button" class="btn btn-success btn-lg">
<span class="glyphicon glyphicon-list"></span><br><font color="white">Results</font>
</button>
<button type="button" class="btn btn-warning btn-lg">
<span class="glyphicon glyphicon-eye-open"></span><br><font color="white">Visualize</font>
</button>
</div>
<br>
<hr>
<p></p>
<footer>
<p>Example</p>
</footer>
</div>
</body>
</html>
If one tries a search with this code, the code should show results, but not the way I expect.
Thanks
Probably not the solution but some hint to get there. Given this:
<ul>
<li class="collapsable"><h2>Release 3.0</h2>
<ul>
<li><h3>Allgemeine Übersicht</h3>
<p>Text ....
</li>
</ul>
</li>
....
</ul>
I do:
<script type="text/javascript">
jQuery(document).ready( function () {
jQuery('.collapsable').click(function () {
jQuery(this).children('ul').first().toggle("slow");
});
});
</script>
And
<style>
li.collapsable ul {
display: none;
}
</style>
A Click on the headline opens the <ul> and closes it again on next click (Actually, there is a lot of text in there and thus the list is very long)
Firstly add an Id to your buttons to make things a bit easier
<button id="btnSearch" type="button" class="btn btn-warning btn-lg" />
<button id="btnResult" type="button" class="btn btn-warning btn-lg" />
<button id="btnVisual" type="button" class="btn btn-warning btn-lg" />
then make sure that you have the three mark-up sections on the page wrapped inside it's own div with an Id on each div.
<div id="search">
...
</div>
<div id="result">
...
</div>
<div id="visual">
...
</div>
In your JavaScript, set-up page for the initial conditions and handle the clicks on the buttons as required. In your search and visualisation functions just show and hide the appropriate div(s) for the conditions your require using JQuery's show() and hide() functions.
It may go something like this - just tweaks this snippet as required, to suit your actual scenario.
function reset() {
$('#search').show();
$('#result').hide();
$('#visual').hide();
}
function init() {
var self = this;
// button clicks
$('#search').click(function () {
self.reset();
});
$('#results').click(function () {
self.search();
});
$('#visual').click(function () {
self.visualize();
});
}
function search() {
// Do search and set results table contents
$('#search').hide();
$('#result').show();
}
function visualize() {
// Do visualisation and set content
$('#result').hide();
$('#visual').show();
}
$(document).ready( function () {
this.reset();
this.init();
)};
You need to use toggle() It will hide element if its current status is visible and show if it is currently hidden:
$('.collapsable').click(function () {
$(this).children('ul').first().toggle();
});