I am trying to make a button on my page that toggles between the style.display of a paragraph.
This is because i want it to only show up when the button is clicked.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<title>Oscar Li</title>
<h1>Oscar Li</h1>
</head>
<body>
<p1>Junior Developer</p>
<!--creates the cube-->
<script type="text/javascript" src="/javascript/myFunction.js"></script>
<p2 id="abMe">"this is my text"</p2>
<p><button2 type="button" onclick= "myFunction" >About me</button></p>
</body>
</html>
Javascript
function myFunction() {
var x = document.getElementById("abMe");
var displaySettings = x.style.display;
if (displaySettings === "none") {
displaySettings = "inline-block";
} else {
displaySettings = "none";
}
}
css
p2{
position: relative;
display: none;
}
Only toggles the paragraph to hide but doesnt toggle it back on to show
Step 1: Don't just make up tags like p1 and p2. While HTML is vary forgiving you can't just add these new tags without defining their behavior. If you are going to use custom elements make sure to close them with the same tag, eg <p1></p1>
Step 2: Use CSS to adjust styling and javascript to toggle the css.
/*The modern way to assign a click handler*/
document.querySelector("#toggle").addEventListener("click", myFunction);
function myFunction() {
/*Get the element*/
var x = document.getElementById("abMe");
/*Toggle the show class*/
x.classList.toggle("show");
}
#abMe {
position: relative;
}
/*Hide element without the show class*/
#abMe:not(.show) {
display: none;
}
<p>Junior Developer</p>
<p id="abMe">"this is my text"</p>
<p><button type="button" id="toggle">About me</button></p>
<!DOCTYPE html>
<html>
<head>
<!-- <link rel="stylesheet" href="styles.css"> -->
<title>Oscar Li</title>
<h1>Oscar Li</h1>
<style>
#abMe {
display: none;
}
</style>
</head>
<body>
<p1>Junior Developer</p>
<!--creates the cube-->
<script type="text/javascript" src="/javascript/myFunction.js"></script>
<p id="abMe">"this is my text"</p>
<button type="button" onclick="myFunction()">About me</button>
</body>
<script>
function myFunction() {
var x = document.getElementById("abMe");
var displaySettings = x.style.display
if (displaySettings === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</html>
Related
I am trying to get my option list to hide until the dropdown menu button has been clicked and for it to hide again once it has been clicked however, it is not working. Here is my code. Please let me know what i can do to fix it
My html :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width initial-scale=1">
<title>Cocktail App</title>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;600&display=swap"
rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="css/recipe.css">
<script src="recipe.js"></script>
</head>
<body>
<h2>YOUR ONE STOP SHOP FOR AMAZING COCKTAIL RECIPES!</h2>
<div class="container">
<button onclick="myFunction()" class="dropbtn"> Cocktails!!</button>
<div id="myDropdown" class="search-container">
<input type="text" placeholder="Choose cocktail..." id="myInput" onkeyup="filterFunction()">
Margarita
<a href="#>Mojito</a>
Long Island tea
Whiskey Sour
</div>
</div>
<div id="result"></div>
</div>
</body>
</html>
My javascript :
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
var input = document.getElementById("myInput");
var filter = input.value.toUpperCase();
var dropDown = document.getElementById("myDropdown");
var link = dropDown.getElementsByTagName("a");
for (i = 0; i < link.length; i++) {
textValue = link[i].textContent || link[i].innerText;
if (textValue.toUpperCase().indexOf(filter) > -1) {
link[i].style.display = "";
} else {
link[i].style.display = "none";
}
}
}
You'll need some CSS to define the class "show", for example add this inside your HTML <head>:
<style>
.hidden {
display: none !important;
}
</style>
Notice that I changed the class name to "hidden" instead of "show" for semantics.
This way, when an element has the class "hidden", it will not be displayed.
Now change your Javascript correspondingly, so it adds and removes the class "hidden":
document.getElementById("myDropdown").classList.toggle("hidden");
First try to add the missing quotation mark after # in:
<a href="#>Mojito</a> and see if it works then.
And remove the 'java' from tags since this is not java but javascript :)
I can't see your css but your .show class needs to defined. Add the following to your stylesheet:
#myDropdown {
display: none;
}
#myDropdown.show
{
display: block;
}
Working:
function myFunction() { document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
var input = document.getElementById("myInput");
var filter = input.value.toUpperCase();
var dropDown = document.getElementById("myDropdown");
var link = dropDown.getElementsByTagName("a");
for (i = 0; i < link.length; i++) {
textValue = link[i].textContent || link[i].innerText;
if (textValue.toUpperCase().indexOf(filter) > -1) {
link[i].style.display = "";
} else {
link[i].style.display = "none";
}
}
}
#myDropdown {
display: none;
}
#myDropdown.show
{
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width initial-scale=1">
<title>Cocktail App</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;600&display=swap" rel="stylesheet" />
</head>
<body>
<h2>YOUR ONE STOP SHOP FOR AMAZING COCKTAIL RECIPES!</h2>
<div class="container">
<button onclick="myFunction()" class="dropbtn"> Cocktails!!</button>
<div id="myDropdown" class="search-container">
<input type="text" placeholder="Choose cocktail..." id="myInput" onkeyup="filterFunction()">
Margarita
Mojito
Long Island tea
Whiskey Sour
</div>
</div>
<div id="result"></div>
</body>
</html>
I try to create a toggle button in order to show/hide some content. For the moment, I use that :
// test.js
var toggle = document.getElementById("toggle");
var content = document.getElementById("content");
toggle.addEventListener("click", function() {
content.style.display = (content.dataset.toggled ^= 1) ? "block" : "none";
});
#content {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<button id="toggle">Click Me</button>
<div id="content">Hello World</div>
</body>
</html>
If I use these code with codepen or JSFiddle, all works fine, but when I try it locally, ( when I click on my index.html file, open it with firefox or an other browser ) my button "Click Me" doesn't works.
When I click on it, nothing happens...
Someone to show me why ?
You could make your function to be fired on load event.
Possible example
(function() {
var loadedContent = {
init: function() {
window.addEventListener("load", function(event) {
var toggle = document.getElementById("toggle");
var content = document.getElementById("content");
toggle.addEventListener("click", function() {
content.style.display = (content.dataset.toggled ^= 1) ?
"block" :
"none";
});
});
}
};
loadedContent.init();
})();
#content {
display: none;
}
<button id="toggle">Click Me</button>
<div id="content">Hello World</div>
Basically I have a button, and when the button has been minimised and the person has finished the chat and the changes the attribute state of the button changes to <button aria-expanded="false"> , I need the whole chat div <div id="beacon-container"> to become hidden on the page.
Is this possible to target this specific attribute if I'm unable to edit the chat button and div code itself as it's an off-page call in?
Many thanks
Am not sure how you have implemented this already so I have just provided you with a solution that is quite open
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
}
</style>
</head>
<body>
<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is my DIV element.
</div>
<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html>
Credit: https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp
how i can create a javascript code to add class name to specific divs only
for Exapmle : i want to add a class_name to from div5 to the end of all divs ?
try this
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.mystyle {
width: 100%;
padding: 25px;
background-color: coral;
color: white;
font-size: 25px;
box-sizing: border-box;
}
</style>
</head>
<body>
<p>Click the "Try it" button to add the "mystyle" class to the DIV element:</p>
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is a DIV element.
</div>
<script>
function myFunction() {
var element = document.getElementById("myDIV");
element.classList.add("mystyle");
}
</script>
</body>
</html>
If you're looking to add a class name from one div to others, I would recommend using JQuery. This can be done like so:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function changeColor(){
$( document ).ready(function() {
$("div").addClass("work");
});
}
</script>
<style>
.work {
color: red
}
</style>
<div style="width: 100%" class="work"><h1>Hello</h1></div>
<div style="width: 100%" class=""><h1>Hello</h1></div>
<button onclick="changeColor()">Change second color by inserting class!</button>
function applyClass(elem_position, tagname, classname)
{
var div_elems = document.querySelectorAll(tagname);
for (var i = elem_position-1; i < div_elems.length;i++)
{
div_elems[i].className=classname;
}
}
Usage
Applies class some_class to div elements starting from position 3
applyClass(3,'div','some_class');
I have a document where it goes like this:
<!DOCTYPE html>
<html>
<head>
<!-- some title, meta stuff and css -->
</head>
<body>
<style src="/secondvid.js"></style>
<div id="vid1"></div>
<button onclick="showSecondVid('vid1', 'vid2');">Video 2</button>
<div id="vid2" style="display: none;"></div>
</body>
</html>
What is inside the divs is not important, but the script looks like this:
function showSecondVid(vid1Id, vid2Id) {
document.getElementById(vid1Id).style.display = "none";
document.getElementById(vid2Id).style.display = "block";
document.querySelectorAll('button')[0].style.display = "none";
dayUp();
}
function dayUp() {
if (localStorage.dayFinished === 4) {
localStorage.dayFinished = 0;
} else if (localStorage.dayFinished) {
localStorage.dayFinished++;
}
}
When I click the button, nothing happens. Can someone help?
I want the first div to disappear and the second one to appear.
Try to call your script like this :
<script src="/secondvid.js"></script>
instead of
<style src="/secondvid.js"></style>