Toggle menu using javascript - javascript

I need to have toggle-open listen for a click and then CHANGE the class name of toggle-box to 'open'. And then have toggle-close listen fora a click and then CHANGE the class name of toggle-box to 'close'. Here is the code that I have already and it's not working, any suggestions?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Drop Down</title>
<link rel="stylesheet" href="dropdown.css" type="text/css"/>
</head>
<body>
<div id="toggle-box" class="close">
<div id="toggle-open">Settings</div>
<div id="toggle-close">Close</div>
<ul>
<li>
<label for="s-1">
<input id="s-1" type="checkbox" checked>
<span>Setting One</span>
</label>
</li>
<li>
<label for="s-2">
<input id="s-2" type="checkbox" checked>
<span>Setting Two</span>
</label>
</li>
<li>
<label for="s-3">
<input id="s-3" type="checkbox">
<span>Setting Three</span>
</label>
</li>
<li>
<label for="s-4">
<input id="s-4" type="checkbox" checked>
<span>Setting Four</span>
</label>
</li>
<li>
<label for="s-5">
<input id="s-5" type="checkbox">
<span>Setting Five</span>
</label>
</li>
</ul>
</div>
<p style="margin-top: 100px; text-align: center; font-size: 75%;">Download the files (dropdown.zip)</p>
<script src="dropdown.js"></script>
</body>
>

No need for jQuery.
var toggleBox = document.getElementById('toggle-box');
document.getElementById('toggle-open').click = function() {
toggleBox.className = 'open';
};
document.getElementById('toggle-close').click = function() {
toggleBox.className = 'close';
};

Instead of the line:
<script src="dropdown.js"></script>
in your code you can write: (You can erase the lines that have alert(tooglebox.className); that I put just to test.)
<script>
var settings = document.getElementById('toggle-open');
var close = document.getElementById('toggle-close');
var tooglebox = document.getElementById('toggle-box');
settings.onclick = function(){
tooglebox.className = "open";
alert(tooglebox.className);
}
close.onclick = function(){
tooglebox.className = "close";
alert(tooglebox.className);
}
</script>

If you can add the jquery javascript library to your page (just one more <script> block) it can be done with the following javascript:
$("#toggle-open").click(function() {
$("#toggle-box").attr("class", "open");
});
$("#toggle-close").click(function() {
$("#toggle-box").attr("class", "close");
});
Without jquery:
document.getElementById("toggle-open").addEventListener("click", function() {
document.getElementById("toggle-box").setAttribute("class", "open");
});
document.getElementById("toggle-close").addEventListener("click", function() {
document.getElementById("toggle-box").setAttribute("class", "close");
});

Related

I have created two checkbox to change the text color in the same page but it work only one checkbox

Please help! I have made the simple two-check box to change the text color on the same page but the result works with only one check box (left-box) the (right-box) is not working. if I comment the (left-box) of JavaScript the (right-box) work normally
Thank you for your help
HTML
<!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.0" />
<title>Example</title>
</head>
<body>
<div class="container">
<div class="left-box">
<div class="checkbox">
<input type="checkbox" name="checkbox" id="checkbox1" />
</div>
<div class="display-text">
<h1 id="greetingL">Hello</h1>
</div>
</div>
<div class="right-box">
<div class="checkbox">
<input type="checkbox" name="checkbox" id="checkbox2" />
</div>
<div class="display-text">
<h1 id="greetingR">Hello</h1>
</div>
</div>
</div>
<script src="./checkboxleft.js"></script>
<script src="./checkboxright.js"></script>
</body>
</html>
JavaScript for the Left-Box
const leftcheckbox = document.getElementById("checkbox1");
const greetingtex = document.getElementById("greetingL");
leftcheckbox.addEventListener("change", () => {
if (leftcheckbox.checked) {
greetingtex.style.color = "Red";
} else {
greetingtex.style.color = "";
}
});
JavaScript for the Right-Box
const rightcheckbox = document.getElementById("checkbox2");
const greetingtex = document.getElementById("greetingR");
rightcheckbox.addEventListener("change", () => {
if (rightcheckbox.checked) {
greetingtex.style.color = "Red";
} else {
greetingtex.style.color = "";
}
});
You're import two scripts, these scripts have the same const "greetingtex". You can change the name to one of them and it should works.
const leftcheckbox = document.getElementById("checkbox1");
const greetingtexL = document.getElementById("greetingL"); // name change
leftcheckbox.addEventListener("change", () => {
if (leftcheckbox.checked) {
greetingtexL.style.color = "Red";
} else {
greetingtexL.style.color = "";
}
});
const rightcheckbox = document.getElementById("checkbox2");
const greetingtexR = document.getElementById("greetingR"); // name changed
rightcheckbox.addEventListener("change", () => {
if (rightcheckbox.checked) {
greetingtexR.style.color = "Yellow";
} else {
greetingtexR.style.color = "";
}
});
<div class="container">
<div class="left-box">
<div class="checkbox">
<input type="checkbox" name="checkbox" id="checkbox1" />
</div>
<div class="display-text">
<h1 id="greetingL">Hello</h1>
</div>
</div>
<div class="right-box">
<div class="checkbox">
<input type="checkbox" name="checkbox" id="checkbox2" />
</div>
<div class="display-text">
<h1 id="greetingR">Hello</h1>
</div>
</div>
</div>
You must always work with the console open, there is probably an error message that will tell you what is happening and in this case it is that you have a constant with the same name.
Think that the two scripts, although they are different files, when you import them in the same html, it is as if they became one. Perhaps you thought that their scopes would not have problems because they are different scripts, I hope you are motivated to use the console and learn to deal with errors in the code, it is day to day programming xD.

Is it possible to close the menu after selecting an item using jquery?

I would like that after selecting an item from the menu, the latter closes to display the desired section
JS code :
$('#toggle').click(function(){
$(this).toggleClass('active');
$('#overlay').toggleClass('open');
});
HTML code:
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset='UTF-8'/>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<link rel="icon" type="image/gif" href="images/animated_favicon1.gif">
<title>Piero Sabino</title>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght#600&family=Pacifico&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" type="text/css" />
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
<meta name="keywords" content="HTML5, CSS3">
<meta name="author" content="Piero Sabino">
<meta name="description" content="My website">
</head>
<body>
<div class='container'>
<!-- HEADER -->
<header id='about'>
<!-- ABOUT-->
<div class='content-wrap'>
<img class='profile-img col narrow' src='images/Piero Sabino.jpeg'>
<div class='col-wide'>
<h1>Piero Sabino</h1>
<p>Hi, my name's Piero Sabino, I'm 30 years old and live in Turi, Puglia. I have been passionate about website development since I went to school and today I decided to enroll the web programming course Start2impact to deepen my Web apps development skills and, at the same time, to become a full-stack developer, a figure sought after by companies operating on the web. Some time ago I took an online course about the Swift programming language. I like football and in my spare time I read or repair damaged objects.
</p>
</div>
</div>
<!-- END OF ABOUT -->
</header>
<!-- END OF HEADER -->
<main>
<!-- PROJECTS-->
<section id='projects'>
<div class='content-wrap'>
<h2>PROJECTS</h2>
<h3>Work in progress</h3>
</div>
</section>
<!-- END OF PROJECTS -->
<!-- CONTACT-->
<section id='contact'>
<div class='content-wrap'>
<div class='contacts'>
<h2>CONTACT</h2>
<form action='' method='get'>
<label for='name'>Name:</label><br />
<input id='name' type='text' name='name' placeholder='John Doe'/><br/>
<label for='email'>E-mail:</label><br/>
<input id='email' type='email' name='email' placeholder='john.doe#example.com'/><br />
<label for='message'>Message:</label><br/>
<textarea id='message' name='message' rows='10' cols='30' placeholder='Leave your message here...'></textarea><br/>
<button id='submit' value='submit' class='btn'>Send</button>
</form>
</div><br/>
<p>Or </p><br/>
<div class='email'>
<p>Send an e-mail to:<address><a href='mailto:piero.sa#icloud.com'>piero.sa#icloud.com</a></address></p>
</div>
</div>
</section>
<!-- END OF CONTACT-->
<!--FOOTER-->
<footer>
<div class='content-wrap'>
<div class='footer'>
<p>Created by Piero Sabino © 2020</p>
<a href='https://www.facebook.com/sabino.piero' target='_blank'><img src='images/social_facebook_box_blue_256_30649.png'/></a>
<a href='https://www.instagram.com/p13rr390/' target='_blank'><img src='images/3721672-instagram_108066.png'/></a>
<a href='https://www.linkedin.com/in/piero-sabino-15a1b671/' target='_blank'><img src='images/sociallinkedin_member_2751.png'/></a>
<a href='https://github.com/pierre1590' target='_blank'><img src='images/github-logo_icon-icons.com_73546.png'/></a>
</div>
</div>
</footer>
<!-- END OF FOOTER-->
</main>
</div>
<div id="toggle" class="button_container">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div id="overlay" class="overlay">
<nav class="overlay-menu">
<ul>
<li>
<a href='#about'>About</a>
</li>
<li>
<a href='#projects'>Projects</a>
</li>
<li>
<a href='#contact'>Contact</a>
</li>
</ul>
</nav>
</div>
<script src='scripts/menu.js' type='text/javascript'></script>
</body>
</html>
I want to close the menu after selecting an item from the menu itself, For example, if I select the "about" item, the menu must close showing me the desired section.
For example if I click on link About, it must show my description.
Although your question is not completely clear what you want, as much I understood by your question, you want something like this, So create a custom select like this, and show the selected item
function DropDown(el) {
this.dd = el;
this.placeholder = this.dd.children('span');
this.opts = this.dd.find('ul.dropdown-at > li');
this.val = '';
this.index = -1;
this.initEvents();
}
DropDown.prototype = {
initEvents: function() {
var obj = this;
obj.dd.on('click', function(event) {
$(this).toggleClass('active');
return false;
});
obj.opts.on('click', function() {
var opt = $(this);
obj.val = opt.text();
obj.index = opt.index();
obj.placeholder.text(obj.val);
});
},
getValue: function() {
return this.val;
},
getIndex: function() {
return this.index;
}
}
$(function() {
var dd = new DropDown($('#dd'));
$(document).click(function() {
$('.wrapper-dropdown-3').removeClass('active');
});
});
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.wrapper-dropdown {
position: relative;
display: inline-block;
}
.wrapper-dropdown > span {
display: inline-block;
padding: 2px 10px;
border: 1px solid;
}
.dropdown-at {
position: absolute;
width: 100%;
left: 0;
list-style: none;
padding: 0;
display: none;
}
.wrapper-dropdown.active .dropdown-at {
display: block;
border: 1px solid;
border-top: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dd" class="wrapper-dropdown" tabindex="1">
<span>option 1</span>
<ul class="dropdown-at">
<li>option 1</li>
<li>option 2</li>
<li>option 3</li>
</ul>
</div>

Simple HTML page getting JS errors- "SyntaxError: missing ; before statement" and "ReferenceError: calculateAdvantage is not defined"

I'm new to JS, and I've looked online, but I'm still not sure why I'm getting these errors. I have an index.html and a CSS sheet. The JS seems to be problematic but I can't figure out why.
The user is supposed to input a few values, click the button, and then the function should trigger and make a change to the "result" div element.
Index.HTML
<html>
<head>
<title>Out of Shield Options</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles/main.css"
</head>
<body>
<h1>Out of Shield</h1>
<div class="navbar">
<ul>
<li>Home</li>
<li>FAQ</li>
<li>Contact Us</li>
</ul>
</div>
<h2>Calculator</h2>
<div id="inputInfo">
<div class="inputLabel">
<label>Hit Frame:</label><input type="text" class ="textField" id="hitFrame" class="inputs" value="0"></input>
</div>
<div class="inputLabel">
<label>IASA Frame:</label><input type="text" class ="textField" id="iasaFrame" class="inputs" value="0"></input>
</div>
<div class="inputLabel">
<label>Damage:</label><input type="text" class ="textField" id="damage" class="inputs" value="0"></input>
</div>
<div class="submit"><input id="calculateButton"type="button" value="Calculate!" onclick="calculateAdvantage()"></div>
<div id="result"></div>
</div>
<script>
calculateAdvantage(){
var hitFrame = document.getElementById("hitFrame");
var IASA = document.getElementById("iasaFrame");
var damage = document.getElementById("damage");
var shieldStun = (damage / 1.75) + 2;
var result = IASA - hitFrame - shieldStun;
document.getElementById("calculateButton").innerHTML = result;
}
</script>
</body>
</html>
You must declare calculateAdvantage as a function:
function calculateAdvantage() {
// Your code goes there
}

uncaught type error: undefined is not a function

Im making a simple form with Telerik Appbuilder HTML5 + javascript that takes a users input and logs it to the console when they click the submit button.
ClientClass.js:
function Client() {
this.username = "username",
this.password = "Password",
this.printUsername = function() {
this.username=$("#Username").val()
console.log(this.username);
};
};
Home.html:
<div data-role="view" data-title="Login" data-layout="main" data-model="APP.models.login">
<script src="../scripts/ClientClass.js"></script>
<h1 data-bind="html: title"></h1>
<script src="../scripts/ClientClass.js"></script>
<script>
function printUsername() {
var client = new client();
client.printUsername();
}
</script>
<ul data-role="listview" data-style="inset">
<li>
<label>Username
<input type="text" value="" id="Username" />
</label>
</li>
<li>
<label>Password
<input type="password" value="" />
</label>
</li>
<li>
<label>
<button onclick="printUsername()" type="button">Submit</button>
</label>
</li>
</ul>
</div>
Index.html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/ClientClass.js"></script>
</head>
<body>
<script src="scripts/ClientClass.js"></script>
<script src="scripts/ClientClass.js"></script>
<div data-role="layout" data-id="main">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>
<!-- application views will be rendered here -->
<label>
<input type="password" value="password" />
</label>
<div data-role="footer">
<div data-role="tabstrip">
Home
Settings
Contacts
</div>
</div>
</div>
</body>
</html>
It says in the console:
uncaught type error: undefined is not a function.
Then it says it is at index.html#views/home.html:1 and when I click that and it takes me to sources panel of the debugger. And it says the source is index.html and it says:
(function() {with (this[2]) {with (this[1]) {with (this[0]) {return function(event) {printUsername() }; }}}})
Does anyone see any issues with my html or javascript? Or the way I import the script? Thanks
you are declaring your client as an object, not as a "class". So using new on your object doesn't make quite sense.
So it's up to you or you keep your object and simply remove:
var client = new client();
or you use a class
function Client(){}

Trouble getting button to show up

I'm new to jQuery and JavaScript. I have a checkbox list that looks great, but I'm trying to add a button to it so that when the user is done checking, the button is hit, and then my function is called to figure out what is checked and also what is not checked.
However, my button is missing. I tried adding the code within li tags with the rest of the checkbox part, but it didn't show up. I tried adding it after the dd tag and also after the end of the div. I think I have to keep it within the form tag for my function to work, unless I'm mistaken. Any ideas why the button isn't showing up?
This is the example I found the function idea in. I searched on the internet and can't find any good ideas why my button doesn't show up. It's probably a syntax error with the tab or something.
Thanks!
This is my code:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>jQuery Michele Project</title>
<link href="css/skins/polaris/polaris.css" rel="stylesheet">
<link href="css/skins/all.css" rel="stylesheet">
<link href="css/demo/css/custom.css" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script src="js/icheck.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.input').iCheck({
checkboxClass:'icheckbox_polaris',
radioClass:'iradio_polaris',
increaseArea:'10%'
});
});
</script>
<script type="text/javascript">
// Returns an array with values of the selected (checked) checkboxes in "frm"
function getSelectedChbox(frm) {
// JavaScript & jQuery Course - http://coursesweb.net/javascript/
var selchbox = []; // array that will store the value of selected checkboxes
// gets all the input tags in frm, and their number
var inpfields = frm.getElementsByTagName('input');
var nr_inpfields = inpfields.length;
// traverse the inpfields elements, and adds the value of selected (checked) checkbox in selchbox
for(var i=0; i<nr_inpfields; i++) {
if(inpfields[i].type == 'checkbox' && inpfields[i].checked == true) selchbox.push(inpfields[i].value);
}
return selchbox;
}
document.getElementById('btntest').onclick = function() {
var selchb = getSelectedChbox(this.form);
alert(selchb);
}
</script>
<style type="text/css">
ul {list-style-type: none}
img {padding-right: 20px; float:left}
#infolist {width:500px}
</style>
</head>
<body>
<form>
<div class="skin skin-line">
<div class="arrows">
<div class="top" data-to="skin-flat"></div>
<div class="bottom" data-to="skin-polaris"></div>
</div>
</div>
<div class="skin skin-polaris">
<div class="arrows">
<div class="top" data-to="skin-line"></div>
<div class="bottom" data-to="skin-futurico"></div>
</div>
<h3>Select Items for Column Headings</h3>
<dl class="clear">
<dd class="selected">
<div class="skin-section">
<h4>Live</h4>
<ul class="list">
<li>
<input tabindex="21" type="checkbox" id="polaris-checkbox-1">
<label for="polaris-checkbox-1">Checkbox 1</label>
</li>
<li>
<input tabindex="22" type="checkbox" id="polaris-checkbox-2" checked>
<label for="polaris-checkbox-2">Checkbox 2</label>
</li>
<li>
<input type="checkbox" id="polaris-checkbox-3" >
<label for="polaris-checkbox-3">Checkbox 3</label>
</li>
<li>
<input type="checkbox" id="polaris-checkbox-4" checked >
<label for="polaris-checkbox-4">Checkbox 4</label>
</li>
</ul>
</div>
<script>
$(document).ready(function(){
$('.skin-polaris input').iCheck({
checkboxClass: 'icheckbox_polaris',
radioClass: 'iradio_polaris',
increaseArea: '20%'
});
});
</script>
$('#checkbox').prop('checked')
</dd>
</dl>
</div>
<input type="button" value="Click" id="btntest" /> //this button isnt showing up on web page
</form>
</body>
</html>

Categories