As you can see in my index.html page, I am adding two javascript file in a single page, one is for menu drop down and another is for readmore option.i'm new to javascript please help.when i add both last one file is work only first file cannot work .
"index.html"
<!DOCTYPE html>
<html>
<head>
<title>united</title>
<link rel="stylesheet" href="/static/css/dps.css"/>
</head>
<body>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">MENU</button>
<div id="myDropdown" class="dropdown-content">
<a href='..'>Home</a>
About
Contact
Question Bank
calender
calculator
</div>
</div><br>
<script src="/static/js/menu.js"></script>
<script src="/static/js/readmore.js" ></script>
</Body>
</html>
"menu.js"
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
"readmore.js"
function myFunction() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
}
else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}
please solve my problem why two js files cannot work in a single page.
Welcome to Stack Overflow!
Both your scripts define a function with the same name: myFunction. If you define 2 functions with the same name, then the second function will shadow the first one, meaning that the first one is inaccessible. When calling myFunction you will always call the second function.
If you make sure that the functions have different names, then it should work.
be carefull about the "onClick" EventListener, the good way to do that is to add an EventListener to the element.
For exemple for your button
const element = document.getElementById('dropbtnId');
element.addEventListener("click", function() {
myFunction();
});
Here is an example with your code :
const element = document.getElementById('dropbtnId');
element.addEventListener("click", function() {
alert("triggered");
});
<html>
<head>
<title>united</title>
<link rel="stylesheet" href="/static/css/dps.css"/>
</head>
<body>
<div class="dropdown">
<button id="dropbtnId" class="dropbtn">MENU</button>
<div id="myDropdown" class="dropdown-content">
<a href='..'>Home</a>
About
Contact
Question Bank
calender
calculator
</div>
</div><br>
Next step is to rename your functions, and then call it inside the EventListener
Related
Can we customize the title in alert box for a webapp created using google apps script ?
function confirmReserve(text){
document.body.style.cursor = 'auto';
console.log('text = '+text);
alert(text);
}
The title on an alert can't be changed due to security reasons, to let the user know who is sending it and to avoid possible phishing.
You could use a modal box to display the message you want. As an example:
HTML:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<button id="myBtn">Open Modal</button>
<div style="display: none" id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
</body>
<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</html>
You can then style the modal as an alert using CSS.
I made a post last night about centering the text and the button itself and I appreciate getting great feedback that solved the problem. Now I'm having a different issue, the button wont function on mobile for some reason? It was working fine last night when I tested it out but just now when I tried to apply it on another page it wasn't functioning on mobile. The button appears on mobile but it just wont do anything upon clicking it. There's no issue like this on desktop though, so I'm a bit confused. I'll paste the entire code below.
Take a look and see if you can help,
Thanks.`
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#more {display: none;}
</style>
</head>
<body>
<span id="dots"></span><span id="more" style=color:black;>Example Text</span></p>
<div style="text-align:center"> <button onclick="myFunction()" id="myBtn" style=color:white;background-color:black;>Lyrics</button></div>
<script>
function myFunction() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Lyrics";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "block";
moreText.style.textAlign = "center";
// btnText.parentElement.style.textAlign = "center";
}
}
</script>
</body>
</html>
`
You have a couple of problems with your HTML, I'll comment them below:
<span id="dots"></span>
<!-- no quotes in the style attribute -->
<span id="more" style=color:black;>Example Text</span>
<!-- closing inexistent p tag -->
</p>
<div style="text-align:center">
<!-- no quotes in the style attribute -->
<button onclick="myFunction()" id="myBtn" style=color:white;background-color:black;>Lyrics</button>
</div>
Once fixed all of the above, I'll mention that it's a bad practice to use onclick, and you should use Element.addEventListener with the click event like so:
var btn = document.getElementById("myBtn")
btn.addEventListener("click", myFunction)
All that said, here's a working JSFiddle
I am attempting to have a dropdown navigation system, however, I am unable to have both dropdowns open at the same time. Despite hours of looking I can't seem to find a way to achieve this.
Any help is much appreciated.
My HTML;
<head>
<title>Home</title>
<link type="text/css" href="F:\Revision Website\Styling\Stylesheet.css" rel="stylesheet"/>
<script type="text/javascript" src="F:\Revision Website\Scripts\Main.js"></script>
</head>
<body>
<header>
<h1>Home</h1>
</header>
<nav>
<div class="navbar">
Home
<button class="dropbtn" onclick="showFunction()">Computing</button>
<div class="dropdownContainer" id="content">
Link 1
Link 2
Link 3
</div>
<button class="dropbtn" onclick="showFunction()">Physics</button>
<div class="dropdownContainer" id="content">
Link 1
Link 2
Link 3
</div>
</div>
</nav>
<article>
<p></p>
</article>
</body>
My JS;
function showFunction() {
document.getElementById("content").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdownContainer");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
EDIT
The following code "works" however, only through use of internal JS, which I rather not use.
var dropdown = document.getElementsByClassName("dropbtn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
Please Use
<button class="dropbtn" onclick="showFunction(this)">Physics</button>
and javascript
function showFunction(ele) {
$(ele).find('#content').classList.toggle("show");
}
i think this would be help
I just found this helpful JS Toggle..
Is it possible to modify this one? I just want to show the actual selected one and hide all others..
<script type="text/javascript">
function toggle(control){
var elem = document.getElementById(control);
if(elem.style.display == "none"){
elem.style.display = "block";
}else{
elem.style.display = "none";
}
}
</script>
link
<br /><div id="test" style="display: none">text</div>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<script>
function show(idToShow, classToHide) {
var classList = document.querySelectorAll('.'+classToHide);
var thisElem = document.getElementById(idToShow);
var wasShown = (thisElem.style.display == "block");
var i = -1;
while (node=classList[++i]) {
node.style.display ="none";
};
if(!wasShown){
thisElem.style.display = "block";
}
}
</script>
</head>
<body>
<div onclick="show('a','all');">A
<div class="all" id="a" style="display:none">The stuff to show</div>
</div>
<div onclick="show('b','all');">B
<div class="all" id="b" style="display:none">The stuff to show</div>
</div>
<div onclick="show('c','all');">C
<div class="all" id="c" style="display:none">The stuff to show</div>
</div>
</body>
</html>
It was a fight to get IE 8 support, document.getElementsByClassName was not supported in that version. It seems that document.querySelectorAll does work in IE 8, but not in quirks mode. Sample code fixed to use this and engage standard mode.
Note: My first quick hack of this used a for loop rather than the while:
for (var i=0;i<classList.length;i++) {
classList[i].style.display ="none";
};
Bonus points if you can spot when this will fail (hover mouse to see answer):
if there's an element in the list with the id length (in which case classList.length will refer to that element, not the length of the NodeList.)
I'm new to this site. I've googled for almost 6 days now for javascript to use in making a dropdown menu as seen on Google and Facebook. FB uses it on Account link. When you click on Account in Facebook, a dropdown menu comes out.
This is what I'd like:
When we click anywhere else on the page, it disappears, but it's still displayed when we click on this menu itself e.g. we can logout from the page, but if we click somewhere else, it disappears like some onblur event has occured.
I've written the code like the following:
<html>
<head>
<title>Untitled Document</title>
<script type="text/javascript">
function dropdown() {
var ele = document.getElementById("hide");
if(ele.style.display == "block") {
ele.style.display = "none";
} else {
ele.style.display = "block";
}
}
</script>
</head>
<body>
Hello Mohd
<div id="hide" style="display:none">
<p>Hii All<p></p>Hw r u</p>
<p>Sign Out</p>
</div>
</body>
</html>
In the above code, it works well when I click the link. A dropdown menu appears with all my details and disappears when I click it again. I want it to disappear when we click anywhere else on the page, which I'm unable to do.
If I use onblur then the dropdown menu disappears even when I click on it i. e. I can't use it.
Here you go:
http://jsfiddle.net/Paulpro/vty5s/
Code:
<html>
<head>
<title>Javascript Dropdown Example</title>
<style type="text/css">
#hide{
display: none;
background-color: #68D;
border: 1px solid #000;
width: 80px;
}
</style>
<script type="text/javascript">
function showDropDown(e){
document.getElementById('test').onclick = function(){};
if(e.stopPropagation)
e.stopPropagation(); // W3C model
else
e.cancelBubble = true; // IE model
document.getElementById("hide").style.display = "block";
document.onclick = function(e){
var ele = document.elementFromPoint(e.clientX, e.clientY);
if(ele == document.getElementById("test")){
hideDropDown();
return;
}
do{
if(ele == document.getElementById("hide"))
return;
}while(ele = ele.parentNode);
hideDropDown();
};
}
function hideDropDown(){
document.onclick = function(){};
document.getElementById("hide").style.display = "none";
document.getElementById('test').onclick = showDropDown;
}
</script>
</head>
<body>
Hello Mohd
<div id="hide">
<p>Hii All<p></p>Hw r u</p>
<p>Sign Out</p>
</div>
</body>
<script type="text/javascript">
document.getElementById('test').onclick = showDropDown;
</script>
</html>