i have a problem with my website. I have couple of functions in java script that works in <body> <script> js code </script></body> but when i link external js file with exactly the same code functions that are called by onclick"function name" attribute stop working and I get error can't find variable: function name also it seems like it can't find some of ids for variables because i can't log them. this is my code
function onload() {
/* leaderboard variable */
let x = document.getElementById('boardw');
/* help popup variable*/
let y = document.getElementById('helpw');
/* settings popup variable*/
let z = document.getElementById('setw');
/* help button variable*/
let a = document.getElementById('help');
/* dropdown container variable*/
let dropdown = document.getElementById('dropdown');
/* footer popup display none*/
document.getElementById('card').style = "display: none;";
/* variable test */
console.log(x);
/* show footer popup */
function showCard() {
document.getElementById('card').style = "display: block;";
document.getElementById('footer').style = "display: none;";
}
/* hide footer popup */
function hide() {
document.getElementById('card').style = "display: none;";
document.getElementById('footer').style = "display: block;";
}
/* choose time in dropdown function */
function show(anything) {
document.getElementById('txt').value = anything;
}
/* show options in dropdown */
dropdown.onclick = function() {
dropdown.classList.toggle('active');
}
/* show leaderboard function*/
function menu1() {
x.classList.toggle('active');
}
/* show help popup function*/
function menu2() {
y.classList.toggle('active');
a.classList.toggle('active');
}
/* show settings function*/
function menu3() {
z.classList.toggle('active');
}
/* hide popups function*/
function remove() {
y.classList.remove('active');
z.classList.remove('active');
x.classList.remove('active');
dropdown.classList.remove('active');
}
}
<body id="bd" style="" onload="onload()">
<script src="script.js" charset="utf-8"></script>
<!-- dropdown select time window -->
<div class="dropdown" id="dropdown" onclick="">
<!-- dropdown textbox with chosen informations -->
<input type="text" class="textbox" id="txt" value="" placeholder=" select the test duration" readonly>
<!-- options for dropdown select -->
<div class="option">
<div onclick="show(' 1 minute')">1 minute</div>
<div onclick="show(' 2 minutes')">2 minutes</div>
<div onclick="show(' 3 minutes')">3 minutes</div>
<div onclick="show(' 5 minutes')">5 minutes</div>
<div onclick="show(' 10 minutes')">10 minutes</div>
</div>
</div>
<!-- checkboxes for charset in game -->
<div id="charset">
<!-- normal letters check -->
<div>
<label for="cka">a</label>
<input type="checkbox" id="cka" class="ck">
</div>
<!-- capital letters check -->
<div>
<label for="ckB">A</label>
<input type="checkbox" id="ckB" class="ck">
</div>
<!-- numbers check -->
<div>
<label for="ck1">1</label>
<input type="checkbox" id="ck1" class="ck">
</div>
<!-- special characters check -->
<div>
<label for="ck>">#</label>
<input type="checkbox" id="ck" class="ck">
</div>
</div>
<!-- about popup -->
<footer onclick="remove()">
<!-- show popup btn -->
<button id="footer" onclick="showCard();" style="">i</button>
<!-- popup container -->
<div id="card" class="card" style="">
<!-- close popup btn -->
<button id="close" onclick="hide()">x</button>
</div>
</footer>
<!-- menu -->
<menu>
<!-- leaderboard popup -->
<button class="menu" id="board" onclick="menu1()">L</button>
<div id="boardw" style="" class="menuw">
</div>
<!-- help popup -->
<button class="menu" id="help" onclick="menu2()">?</button>
<div id="helpw" style="" class="menuw">
</div>
<!-- settings pop -->
<button class="menu" id="settings" onclick="menu3()">S</button>
<div id="setw" style="" class="menuw">
</div>
</menu>
<!-- start game btn -->
<div id="gma">
<button id="start">Start</button>
</div>
<!-- frame for higher resolution screen-->
<div class="h"> </div>
</body>
You wrapped your functions in function onload() { ... } so the inner functions can't be reached from HTML.
Remove this wrapper.
Add defer attribute to the script
put functions and variables outside the onload function,
or use addEventListener to call listener
document.getElementById("cka").addEventListener("click", function(){
...
})
Related
Okay, I dont know why my codepen version and my real one act different, but they are. In my codepen both windows start off with all of them open. In my real version you only see 2 sets of 01-Postpone and 02-Approve, the way they should be. Here, in my code snippet, the first text box does not populate, but the values are logged in the console.
Okay, so now my problem. Clicking any 1 of these slides opens a box underneath it with 2 options. PROCEED and CANCEL. With my fun function, it gets the 3 variables perfectly when 1 of those options is clicked ( see them in my console).
When PROCEED is clicked, I need those 3 variables so that I can run an ajax post to an external file. How do I get the 3 fun variables into my proceed function? I thought with var, they would be global, but I have tried many possibilities without success to access them. I do not want to use cookies as I am sure this is possible without them.
I have another freaky issue, but that is for another day when I get this part to work. Any assistance would greatly be appreciated.
https://codepen.io/lepew/pen/agNBzo
// 00 - CANCEL
function cancel00() {
alert("Cancel");
}
// End CANCEL
// 02 - PROCEED
function proceed01() {
// Ajax will go here
alert("This works.");
}
// End of PROCEED
// 03 - Get the data-field variables
function fun(obj) {
var one = obj.dataset.self,
two = obj.dataset.record,
three = obj.dataset.selectedoption;
//
console.log(one, two, three);
//
}
//external file
$(document).ready(function() {
$(".dropdown-link").on("click", function() {
//
const tranSpeed = "slow";
//
//
// Get code variable and be able to access this value elsewhere.
var selectmycode = $(this).attr("data-selectedoption");
//
// Display the variable in CONSOLE.
console.log(selectmycode);
//
// Get clicked option.
var selOption = $(this).data("selectedoption");
//
// Out the value of selectedoption into text field thecode.
var thecoder = $(".thecode").attr("value", selOption);
//
//
//
// Get next "here".
var here = $(this).closest(".bind_Name").next(".here");
//
// Populate stuff.
$(here).find("legend").text(`Option ${selOption}`);
//
// TO DETECT IF DATA HAS CHANGED.
var dataChanged = $(here).data("seloption") !== selOption;
$(here).data("seloption", selOption);
console.log(dataChanged)
//
// Show the dropdown if data changed.
var target = $(here).find(".dropdown-container");
//
// This will close all other open options.
$(".dropdown-container").not(target).hide(tranSpeed);
//
if (dataChanged) {
$(target).show(tranSpeed);
} else {
// Or toggle it otherwise.
$(target).toggle(tranSpeed);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bind_Area">
<div class="bind_Name">
<div class="dropdown">
<div class="dropdown-link" onclick="fun(this);" data-selectedoption="01" data-record="123456820" data-self="123456830">01-Postpone
</div>
<!-- end of #dropdown-link -->
</div>
<!-- end of #dropdown -->
<div class="dropdown">
<div class="dropdown-link" onclick="fun(this);" data-selectedoption="02" data-record="123456820" data-self="123456830">02-Approve
</div>
<!-- end of #dropdown-link -->
</div>
<!-- end of #dropdown -->
</div>
<!-- end of #bind_Name -->
<div class="here">
<div class="dropdown-container">
<fieldset>
<legend></legend>
<input type="text" class="thecode" data-code="">
<input type="text" class="peter" data-user="123456820" value="123456820">
<input type="text" id="mary" data-product="123456830" value="123456830">
<div>PROCEED</div>
<div>CANCEL</div>
</fieldset>
</div>
<!-- end of #dropdown-container -->
</div>
<!-- end of #here -->
<div class="bind_Note"></div>
</div>
<!-- end of #bind_Area -->
<br>
<br>
<br>
<div class="bind_Area">
<div class="bind_Name">
<div class="dropdown">
<div class="dropdown-link" onclick="fun(this);" data-selectedoption="01" data-record="123456820" data-self="123456831">01-Postpone
</div>
<!-- end of #dropdown-link -->
</div>
<!-- end of #dropdown -->
<div class="dropdown">
<div class="dropdown-link" onclick="fun(this);" data-selectedoption="02" data-record="123456820" data-self="123456831">02-Approve
</div>
<!-- end of #dropdown-link -->
</div>
<!-- end of #dropdown -->
</div>
<!-- end of #bind_Name -->
<div class="here">
<div class="dropdown-container">
<fieldset>
<legend>
<div class="fubar"></div>
</legend>
<div>
<input type="text" class="thecode" data-code="">
<input type="text" class="peter" data-user="123456820" value="123456820">
<input type="text" id="mary" data-product="123456831" value="123456831">
</div>
<!-- end of #blank div -->
<div>PROCEED</div>
<div>CANCEL</div>
</fieldset>
</div>
<!-- end of #dropdown-container -->
</div>
<!-- end of #here -->
<div class="bind_Note">
</div>
</div>
<!-- end of #bind_Area -->
<br>
<br>
<br>
I want to Close the sidenav by clicking anywhere outside sidenav
my html code is
<body>
<!-- show image while loading -->
<div class="se-pre-con"></div>
<!-- Header starts here -->
<div class = "header">
<!-- search bar -->
<?php include("header.php");?>
<!-- search bar ends here -->
</div>
<!-- header ends here -->
<div class="primary" id="primary">
<!-- image slider starts here -->
<div class="image-slider">
<?php include("slider.php");?>
</div>
<!-- image slider starts here -->
<!-- all-content starts here -->
<div class = "container wraper">
<!-- content starts here -->
<div class="content">
<h3 class="Category"><strong> Category </strong>
<button type="submit" class="btn btn-xs btn-success complete" id="more"><strong>More </strong> <span class="glyphicon glyphicon-forward"></button>
</h3><hr id="index-hr">
<?php include("functions/index_category.php"); ?>
</div>
<!-- content ends here -->
</div>
<!-- all-content ends here-->
<!-- daily adds starts here -->
<div class="container news">
<h3 class="news"><strong> Daily News </strong></h3><hr id="index-hr">
</div>
<!-- daily adds ends here -->
<!-- side nav starts here -->
<div id="mySidenav" class="sidenav">
×
<div id="result">
<?php include("functions/sub_category.php")?>
</div>
</div>
<!-- side nav ends here -->
</div>
</body>
The Js i tried :
//close the side nav when clicked outside
var primary = document.getElementById('primary');
var sidenav = document.getElementById('mySidenav');
window.onclick = function(event){
if( event.target == primary ){
sidenav.style.width = "0px";
primary.style.marginLeft = "0px";
}
}
How ever it works clicking enywhere on the side nav by replacing event.target == sidenav But i want to close it by clickng outside
js for opening and closing the side nav are
function openNav() {
if($(window).width() > 600){
$("#mySidenav").attr("style","width:350px");
$(".primary").attr("style","margin-left:350px");
}else{
$("#mySidenav").attr("style","width:100%");
$(".primary").attr("style","margin-left:100%");
}
}
function closeNav() {
$("#mySidenav").attr("style","width:0px");
$(".primary").attr("style","margin-left:0px");
}
css code:
.wraper{
min-height: 165px;
overflow: hidden;
height: 200px;
}
.content {
margin-top: 30px;
}
#more{
width:6%;
margin-right:0px;
float:right;
}
.wraper.complete{
height: auto;
}
h3.sub{
color:#d34615;
text-decoration:underline;
padding-left: 10px;
}
#index-hr{
width:100%;
border-top:1px solid #333;
opacity:0.3;
}
Just check the event.target to see if it was NOT the side nav and that the nav is NOT already open:
//close the side nav when clicked outside
var primary = document.getElementById('primary');
var sidenav = document.getElementById('mySidenav');
window.onclick = function(event){
var sideNavWidth = sidenav.style.width;
// check to see if the event target was not the side nav
// AND that the side nav is open
if( event.target !== sidenav && sideNavWidth !== "0" ){
sidenav.style.width = "0";
primary.style.marginLeft = "0";
}
}
This is a crude implementation of your code, but you can see that the side nav bar does, in fact open (yellow) and will not close if you click on it, but will close if you click anywhere else.
//close the side nav when clicked outside
var primary = document.getElementById('primary');
var sidenav = document.getElementById('mySidenav');
window.onclick = function(event){
var sideNavWidth = sidenav.style.width;
// check to see if the event target was not the side nav
// AND that the side nav is open
if( event.target !== sidenav && sideNavWidth !== "0" ){
closeNav();
}
}
function closeNav(){
sidenav.style.width = "0";
primary.style.marginLeft = "0";
}
.sidenav { background: yellow;}
<div class="primary" id="primary">
<!-- image slider starts here -->
<div class="image-slider">
<?php include("slider.php");?>
</div>
<!-- image slider starts here -->
<!-- all-content starts here -->
<div class = "container wraper">
<!-- content starts here -->
<div class="content">
<h3 class="Category"><strong> Category </strong>
<button type="submit" class="btn btn-xs btn-success complete" id="more"><strong>More </strong> <span class="glyphicon glyphicon-forward"></button>
</h3><hr id="index-hr">
<?php include("functions/index_category.php"); ?>
</div>
<!-- content ends here -->
</div>
<!-- all-content ends here-->
<!-- daily adds starts here -->
<div class="container news">
<h3 class="news"><strong> Daily News </strong></h3><hr id="index-hr">
</div>
<!-- daily adds ends here -->
<!-- side nav starts here -->
<div id="mySidenav" class="sidenav">
×
<div id="result">
<?php include("functions/sub_category.php")?>
</div>
</div>
<!-- side nav ends here -->
</div>
I created the popup when I am trying to call action on click for close pop up icon no change is shown.
In index.html in bottom there is code for pop up, this will be shown when user will click on change zip code link.
<!-- Pop up div -->
<div class="popup" ng-show="myModal" ng-controller="utilityCtrl">
<!-- Modal content -->
<div class="popup-content">
<span class="close" ng-click="closePopup">×</span>
<div class="dynamicContect" id="dynamicContect"> Loading ...
</div>
</div>
</div>
<!-- html of change zip code -->
<div class="hidden" id="updateZipContent">
<div class="zipContent">
<div class="padding-bt-2">Please enter new zip code</div>
<div class="row">
<div class="text-left col-md-6 padding-bt-2">
<input ng-model="zipCode" type="text" class="form-control" maxlength="5" data-required="true" number-only>
</div>
<div class="text-left col-md-4">
<button class="btn btn-primary form-control">Update</button>
</div>
</div>
</div>
</div>
Change zip code action is written in autoQuotectrl.js
$scope.changeZipCode = function()
{
$rootScope.myModal = true;
var firstDivContent = document.getElementById('updateZipContent');
var secondDivContent = document.getElementById('dynamicContect');
secondDivContent.innerHTML = firstDivContent.innerHTML;
}
To keep other action separate I wrote new controller utilityCtrl.js.
Here I wrote action for hide this popup .
$scope.closePopup = function ()
{
console.log('here in utility');
$rootScope.myModal = false;
document.getElementById('dynamicContect').innerHTML = "";
}
But nothing is working, please help me to understand what I am missing here.
It seems $rootScope.myModal is not accessible in utilityCtrl
You don't invoke function closePopup in template.
See example on plunker.
<div class="popup" ng-show="myModal" ng-controller="utilityCtrl">
<!-- Modal content -->
<div class="popup-content">
<span class="close" ng-click="closePopup()">×</span>
<div class="dynamicContect" id="dynamicContect"> Loading ...
</div>
</div>
</div>
they are in two controller,so the $scope is diferent ,you can use $rootScope.$broadcast and $scope.$on
document.getElementById("nextOneButton").onclick = function(){
document.getElementById("mainFrameOne").style.display="none";
document.getElementById("mainFrameTwo").visibility="visible";
}
//mainFrameTwo is initially set hidden in terms of visibillity
//nextOneButton is on top of the mainFrameOne in terms of position, when //clicked it should move to next frame. Some what like a slide show
Really you need a button so you can bind your function to the onclick event. Here is a possible solution:
<html>
<head>
<title></title>
<script>
function myFunction() {
document.getElementById("mainFrameOne").style.display="none";
document.getElementById("mainFrameTwo").style.display="block";
}
</script>
</head>
<body>
<div id="mainFrameOne">
<p>mainFrameOne</p>
</div>
<div id="mainFrameTwo" style="display:none;">
<p>mainFrameTwo</p>
</div>
<button onclick="myFunction()">Click me</button>
</body>
</html>
Alternatively, you could use anchor tags to remove the need for the button:
<html>
<head>
<title></title>
<script>
function myFunction() {
document.getElementById("mainFrameOne").style.display="none";
document.getElementById("mainFrameTwo").style.display="block";
}
</script>
</head>
<body>
<a id="mainFrameOne" onclick="myFunction()" href="#">
mainFrameOne
</a>
<a id="mainFrameTwo" href="#" style="display:none;">
mainFrameTwo
</a>
</body>
</html>
<div id ="activeContent" >
<div id ="mainFrameOne"> <!-- POSITION MATTERS WHEN YOU WANT TO DO THE DISSAPEARING ACT WITH JAVASCRIPT -->
<img src="person.gif" id ="person" width="1350" height ="900">
<div id ="backOneButton"> <h4 class ="directionButtonsText"> Back </h4> </div>
<div id ="nextOneButton"> <h4 class ="directionButtonsText"> Next </h4> </div>
<div id = "mainFrameOneTitleBar">
<h3 id ="jakesLemonade">Jake's Lemonade Stand</h3>
</div> <!-- End of MainFrameTitleBar -->
<h3 id = "firstTextJake"> This is Jake, the owner of a small lemonade stand.<br> Like many other small business owners, Jake wants to know <br>what the future holds for him. CloudFin can tell him exactly that. </h3>
</div> <!-- End of MainFrameOne Div-->
<div id ="mainFrameTwo">
<div id ="backTwoButton"> <h4 class ="directionButtonsText"> Back </h4> </div>
<div id ="nextTwoButton"> <h4 class ="directionButtonsText"> Next </h4> </div>
<div id = "mainFrameTwoTitleBar">
<h3 id ="lemsLemons">When life gives you lemons, Make lemonade</h3>
<script type="text/javascript">
</script>
</div> <!-- End of MainFrameTitleBar -->
<h3 id = "secondTextJake"> How much does each lemon cost?</h3>
</div> <!-- End of MainFrameTwo -->
</div> <!-- End of ActiveContent Div -->
If something is not working you can consider using addEventListener.
Example:
document.getElementById('button').addEventListener('click', changeVisibility(), null);
function changeVisibility()
{
document.getElementById('divToHide').style.display = "none";
document.getElementById('divToShow').style.display = "block";
}
I am trying to use a link to open a specific tab that is created using divs and the tabs open and close using javascript.
Here are the tabs and the javascript is within the script tags at the bottom:
<div class="span12 module_cont module_tabs">
<div class="shortcode_tabs">
<div class="all_heads_cont">
<div class="shortcode_tab_item_title it1 head1 active" data-open="body1">%%LNG_ProductDescription%%</div>
<div class="shortcode_tab_item_title it2 head2" id="reviews" data-open="body2">%%LNG_JS_Reviews%%</div>
<div class="shortcode_tab_item_title it3 head3" data-open="body3">%%LNG_JS_ProductVideos%%</div>
<div class="shortcode_tab_item_title it4 head4" data-open="body4">%%LNG_JS_SimilarProducts%%</div>
</div>
<div class="all_body_cont">
<div class="shortcode_tab_item_body body1 it1">
<div class="ip">
%%Panel.ProductDescription%%
</div>
</div>
<div class="shortcode_tab_item_body body2 it2">
<div class="ip">
%%Panel.ProductReviews%%
</div>
</div>
<div class="shortcode_tab_item_body body3 it3">
<div class="ip">
%%Panel.ProductVideos%%
</div>
</div>
<div class="shortcode_tab_item_body body4 it4">
<div class="ip">
%%Panel.SimilarProductsByTag%%
%%Panel.ProductByCategory%%
%%Panel.ProductVendorsOtherProducts%%
%%Panel.SimilarProductsByCustomerViews%%
</div>
</div>
</div>
</div><!-- .shortcode_tabs -->
<script type="text/javascript">
jQuery('.shortcode_tabs').each(function(index) {
/* GET ALL HEADERS */
var i = 1;
jQuery('.shortcode_tab_item_title').each(function(index) {
jQuery(this).addClass('it'+i); jQuery(this).attr('whatopen', 'body'+i);
jQuery(this).addClass('head'+i);
jQuery(this).parents('.shortcode_tabs').find('.all_heads_cont').append(this);
i++;
});
/* GET ALL BODY */
var i = 1;
jQuery('.shortcode_tab_item_body').each(function(index) {
jQuery(this).addClass('body'+i);
jQuery(this).addClass('it'+i);
jQuery(this).parents('.shortcode_tabs').find('.all_body_cont').append(this);
i++;
});
});
jQuery('.shortcode_tabs .all_body_cont div:first-child').addClass('active');
jQuery('.shortcode_tabs .all_heads_cont div:first-child').addClass('active');
jQuery('.shortcode_tab_item_title').live('click', function(){
jQuery(this).parents('.shortcode_tabs').find('.shortcode_tab_item_body').removeClass('active');
jQuery(this).parents('.shortcode_tabs').find('.shortcode_tab_item_title').removeClass('active');
var whatopen = jQuery(this).attr('data-open');
jQuery(this).parents('.shortcode_tabs').find('.'+whatopen).addClass('active');
jQuery(this).addClass('active');
});
jQuery('reviews').live('click', function(){
jQuery(this).parents('.shortcode_tabs').find('.shortcode_tab_item_body').removeClass('active');
jQuery(this).parents('.shortcode_tabs').find('.shortcode_tab_item_title').removeClass('active');
var whatopen = jQuery(this).attr('data-open');
jQuery(this).parents('.shortcode_tabs').find('.'+whatopen).addClass('active');
jQuery(this).addClass('active');
});
</script>
</div><!-- .module_cont -->
All I want to do is have a link on the same page that activates the reviews tab (id="reviews") and is also known as the body2.
all I have so far for my link is:
Reviews
Help. My brain hurts...
You just need to set the link up so that it doesn't take the user to a new page, and then setup a click event to open the tab up. Example:
HTML:
<a href='javascript:void(0);' id='reviewLink'>Review Tab</a>
JavaScript:
$('#reviewLink').click(function() {
$('.shortcode_tab_item_body').css({display:'none'});
$('.body2').css({display:'none'});
});
Or a jsfiddle here: http://jsfiddle.net/tKLhn/