Javascript Button Not Redirecting - javascript

I am trying to make a simple webpage with buttons that redirect to other subpages, all the HTML javascript, and CSS files are in the same folder. When I use the javascript code it just won't redirect when I click the button, anyone knows what is wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
<script src="script.js" type="text/javascript"></script>
</script>
<link href="styles.css" rel="stylesheet">
<title>About me</title>
</head>
<body>
<div class="title">
<h1 style="size: 22;">HOMEPAGE</h1>
</div>
<div class="btn-group blue">
<button id="general">General</button>
<button>2</button>
<button>3</button>
<button>4</button>
</div>
<div class="float-container">
<div class="float-child" style="border: white;">
<img src="https://api.time.com/wp-content/uploads/2014/03/improving-life-health-hiking-nature.jpg" alt="Picture of Hiker" style="width: 100%; padding: 5px;"/>
</div>
<div class="float-child">
<p>
Hello, welcome to my website.
</p>
</div>
</div>
</body>
</html>
And here is the Javascript.
document.addEventListener('DOMContentLoaded', function(){
let general = document.querySelector(".general");
general.addEventListener('click', function(){
window.location.replace("general.html");
});
});
Anyone notice anything?
I tried different ways of redirecting on W3 schools and none of it worked.


Because you have defined button by id not by class
<button id="general">General</button>
So change
let general = document.querySelector(".general");
to
let general = document.querySelector("#general");
document.addEventListener('DOMContentLoaded', function(){
let general = document.querySelector("#general");
general.addEventListener('click', function(){
window.location = "https://www.facebook.com";
return false;
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
<script src="script.js" type="text/javascript"></script>
</script>
<link href="styles.css" rel="stylesheet">
<title>About me</title>
</head>
<body>
<div class="title">
<h1 style="size: 22;">HOMEPAGE</h1>
</div>
<div class="btn-group blue">
<button id="general">General</button>
<button>2</button>
<button>3</button>
<button>4</button>
</div>
<div class="float-container">
<div class="float-child" style="border: white;">
<img src="https://api.time.com/wp-content/uploads/2014/03/improving-life-health-hiking-nature.jpg" alt="Picture of Hiker" style="width: 100%; padding: 5px;"/>
</div>
<div class="float-child">
<p>
Hello, welcome to my website.
</p>
</div>
</div>
</body>
</html>

Related

jquery UI image is resizable but not draggable?

I have the following script that allows me to resize the image, however, I am not able to drag the image around and change its position
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="home.css" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>
</head>
<body>
<div class="row">
<div class="div1">
<h1> About Us </h1>
<p class="card-text">
general description
</p>
<div id="draggableHelper" style="display:inline-block">
<img id="image" src = "images/jimslogo2.png"/>
</div>
</div>
<div class="div2">
<span class="dot">
<div>
<div id="rotator"></div>
</div>
<p class="textScale">
<b>Featured Products </b>
</p>
</span>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#draggableHelper').draggable();
$('#image').resizable();
});
</script>
</body>
</html>
The image I'm trying to drag is contained in its own div tag within the "row" class div. I'm not sure this isn't working

What is your purpose in the draggable, you need to define the options for it
https://jqueryui.com/draggable/
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="home.css" >
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="row">
<div class="div1">
<h1> About Us </h1>
<p class="card-text">
general description
</p>
<div id="draggableHelper">
<img id="image" src = "images/jimslogo2.png"/>
</div>
</div>
<div class="div2">
<span class="dot">
<div>
<div id="rotator"></div>
</div>
<p class="textScale">
<b>Featured Products </b>
</p>
</span>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#draggableHelper').draggable();
$('#image').resizable();
});
</script>
</body>
</html>

Use these two links instead.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
You can try my answer here https://jsfiddle.net/a68mdzes/
Hope it works :)

You appear to have two versions of jQuery (3.5.1 & 1.9.1) in your script. You are also using an older version of jQuery UI (1.9.2). It would be best to ensure you are using the latest versions.
$(document).ready(function() {
$('#draggableHelper').draggable();
$('#image').resizable();
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="row">
<div class="div1">
<h1> About Us </h1>
<p class="card-text">general description</p>
<div id="draggableHelper" style="display:inline-block">
<img id="image" src="https://dummyimage.com/100x100/000/fff.png&text=IMAGE" />
</div>
</div>
<div class="div2">
<span class="dot">
<div>
<div id="rotator"></div>
</div>
<p class="textScale">
<b>Featured Products </b>
</p>
</span>
</div>
</div>
The above test allows for both to work as expected. You will notice I am using only one version of jQuery and jQuery UI.

Javascript: copy element html

I need to copy the .container element without using innerHTML.
here the index.html
<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta charset="UTF-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="css/test.css">
<!-- Utilitats CSS i icones Bootstrap CDN -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<script src="js/test.js"></script>
</head>
<body>
<div class="text-center">
<div class="card-header bg-info row">
<div class="col-sm-4">
<img src="https://pbs.twimg.com/profile_images/1046722856929947649/hytXqKH0_400x400.jpg" height="80">
</div>
<div class="col-sm-4">
<h3 class="display-4">Agenda IOC</h3>
<h4 class="text-warning">Consulta tots els esdeveniments</h4>
</div>
<div class="col-sm-4">
<h5 class="card-title">Elegeix la data:</h5>
<input id="data" type="date">
<button id="cerca">Cerca</button>
</div>
</div>
<div class="container">
<div class="card">
<div class="card_image-container">
<img class="card-image" src="http://agenda.cultura.gencat.cat/content/dam/agenda/articles/2018/07/03/033/Esculturas.jpg" alt="">
</div>
<div class="card-body">
<h3 class="card-title">Title</h3>
<p>Description</p>
Go
</div>
</div>
</div>
</div>
<!-- Utilitats js de Bootstrap CDN -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
Copy the element and show it when click in the button.
I need to create a function that I can change the values of each element created.

document.getElementById('ID') is it returning null in only part of my code

I can not get the values ​​from an HTML page using document.getElementById ("ID"),is returning Null, in all the rest of the code everything works perfectly
Something so simple is driving me crazy, because in other parts of the code identically everything works perfectly
HTML:
<div id="childTemplateNotice" class="col-md-12">
<div class="headerNews col-md-12">
<h1 class="titleNotice"></h1>
<p class="subTitle"></p>
<div class="row">
<span class="date"></span>
</div>
JavaScript:
function postNotice(){
console.log(document.getElementById('childTemplateNotice'))
}
HTML INDEX:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<title></title>
<link rel="stylesheet" type="text/css" href="notice.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../../components/coments/coments.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../../css/reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../../components/header/header.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../../components/footer/footer.css" media="screen" />
<!-- Bootstrap e Jquery -->
<link rel="stylesheet" type="text/css" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" media="screen" />
</head>
<body>
<div class="col-md-12">
<?php include "../../components/header/header.html"; ?>
<div id="noticeFather"class=" col-md-12">
<div class="ads col-md-12 top">
</div>
<div class="headerNews col-md-12">
<h1 class="titleNotice"></h1>
<p class="subTitle"></p>
<div class="row">
<span class="date"></span>
</div>
</div>
<div class="row">
<div class="right col-md-3"></div>
<div class="midle col-md-6">
<p class="body"></p>
<span class="linkTitle"></span>
<a class="linkUrl"></a>
<!-- Coments -->
<div class="comentsDiv col-md-12">
</div>
</div>
<div class="left col-md-3"></div>
</div>
</div>
</div>
<div class="col-md-12">
<?php include "../../components/coments/coments.html" ?>
</div>
<?php include "../../components/footer/footer.html"; ?>
</div>
<!-- Scripts js -->
<script type="text/javascript" src="../../node_modules/moment/min/moment.min.js"></script>
<script type="text/javascript" src="../../node_modules/axios/dist/axios.min.js"></script>
<script type="text/javascript" src="../../node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../components/header/header.js"> </script>
<script type="text/javascript" src="../../service/esmiucado-service.js"></script>
<script type="text/javascript" src="../../repositorio/repositorio.js"> </script>
<!-- Requisição DataBase -->
<script>
postNotice()
getComents(noticeCod)
</script>
</body>
</html>
I already try:
$(document).ready(function() {
function postNotice(){
console.log(document.getElementById('childTemplateNotice'))
}
});
and:
window.onload = function postNotice(){
console.log(document.getElementById('childTemplateNotice'))
}
and they did not work
OBS: the files javascript and html are in different directories
UPDATE:
When I call the function of another page everything works fine, so the problem is when I call this specific page, but I have not yet identified which problem

in document.ready function either remove the function inside it or call the function. First one is also working fine you just have to call the function. window.onload is working perfectly
function postNotice(){
console.log(document.getElementById('childTemplateNotice'))
}
postNotice();
$(document).ready(function() {
console.log(document.getElementById('childTemplateNotice'))
});
window.onload = function postNotice(){
console.log(document.getElementById('childTemplateNotice'))
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="childTemplateNotice" class="col-md-12">
<div class="headerNews col-md-12">
<h1 class="titleNotice"></h1>
<p class="subTitle"></p>
<div class="row">
<span class="date"></span>
</div>

The problem was happening simply because I was not calling the html element on the main page.

Load external html (separate header and footer) before executing js file

I stuck into this problem. My separate header and footer only show after the data in js file is completely fetched. When the data is loading, I can see the input (search image) and another text input but I can't see the header and footer. Any suggestion for getting the header and footer first before executing js file?
Thanks.
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script>
$(function(){
$("#header").load("../header/index.html");
$("#footer").load("../footer/index.html");
});
</script>
<link rel="stylesheet" href="../header/style.css">
<link rel="stylesheet" href="../footer/style.css">
</head>
<body>
<div id="header"></div>
<section>
<div>
<input type="image" src="search.png" id="submitKeywordButton" onclick="submitKeyword();" />
<div style="overflow: hidden;">
<input type="text" name="subscribe" placeholder="keyword" id="keyword"/>
</div>
</div>
</section>
<div id="footer"></div>
<script src="./main.js"></script>
</body>
</html>
Header file
<link rel="stylesheet" href="./style.css">
<header>
<div class="container">
<div id="branding">
<img src="../img/icon.png" height="40" width="160"/>
</div>
<nav>
<img src="../img/firstFlag.png" height="20" width="30"/>
<img src="../img/secondFlag.png" height="20" width="30"/>
</nav>
</div>
</header>

Give this a try:
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../header/style.css">
<link rel="stylesheet" href="../footer/style.css">
</head>
<body style="display: none">
<div id="header"></div>
<section>
<div>
<input type="image" src="search.png" id="submitKeywordButton" onclick="submitKeyword();" />
<div style="overflow: hidden;">
<input type="text" name="subscribe" placeholder="keyword" id="keyword"/>
</div>
</div>
</section>
<div id="footer"></div>
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="./main.js"></script>
<script>
$(function(){
$("#header").load("../header/index.html", function (){
$("#footer").load("../footer/index.html", function() {
$("body").fadeIn(1000);
});
});
});
</script>
</body>

if load method is sync, then try change your html structure like this :
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../header/style.css">
<link rel="stylesheet" href="../footer/style.css">
<script src="../node_modules/jquery/dist/jquery.js"></script>
</head>
<body style="display: none">
<div id="header"></div>
<div id="footer"></div>
<script>
$("#header").load("../header/index.html");
$("#footer").load("../footer/index.html");
</script>
<section>
<div>
<input type="image" src="search.png" id="submitKeywordButton" onclick="submitKeyword();" />
<div style="overflow: hidden;">
<input type="text" name="subscribe" placeholder="keyword" id="keyword"/>
</div>
</div>
</section>
<script src="./main.js"></script>
</body>

simplemodal dialog on initial load

New to JQuery and web dev in general.
I have been trying to get the confirm override simplemodal demo to work, so that it pops up with on alert on initial load of my site.
The below is the standard sample, but I have included the $(document).ready() function to try and fire the modal dialog on startup.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link type='text/css' href='css/demo.css' rel='stylesheet' media='screen' />
<link type='text/css' href='css/confirm.css' rel='stylesheet' media='screen' />
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='js/confirm.js'></script>
<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
$('#confirm-dialog').modal();
});
</script>
</head>
<body>
<div id='container'>
<div id='content'>
<div id='confirm-dialog'>
<input type='button' name='confirm' class='confirm' value='Demo'/>
</div>
<!-- modal content -->
<div id='confirm'>
<div class='header'><span>Confirm</span></div>
<div class='message'></div>
<div class='buttons'>
<div class='no simplemodal-close'>No</div><div class='yes'>Yes</div>
</div>
</div>
<!-- preload the images -->
<div style='display:none'>
<img src='img/confirm/header.gif' alt='' />
<img src='img/confirm/button.gif' alt='' />
</div>
</div>
</div>
</body>
</html>
However, this does not fire, and from what my limited experience with Firebug, I cannot see any errors so must be my code logic that is the issue?

It works for me in JSFiddle. What about using .dialog method of jquery UI library:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link type='text/css' href='css/demo.css' rel='stylesheet' media='screen' />
<link type='text/css' href='css/confirm.css' rel='stylesheet' media='screen' />
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.ui.js'></script>
<script type='text/javascript' src='js/confirm.js'></script>
<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
$('#confirm-dialog').dialog({modal: true});
});
</script>
</head>
<body>
<div id='container'>
<div id='content'>
<div id='confirm-dialog'>
<input type='button' name='confirm' class='confirm' value='Demo'/>
</div>
<!-- modal content -->
<div id='confirm'>
<div class='header'><span>Confirm</span></div>
<div class='message'></div>
<div class='buttons'>
<div class='no simplemodal-close'>No</div><div class='yes'>Yes</div>
</div>
</div>
<!-- preload the images -->
<div style='display:none'>
<img src='img/confirm/header.gif' alt='' />
<img src='img/confirm/button.gif' alt='' />
</div>
</div>
</div>
</body>
</html>
You can download jquery.ui file from here

Categories

Resources