I am trying to create a basic to do list app and the li in my code is not showing up in the console. I called li in the console to check and I get the error (Uncaught ReferenceError: li is not defined) but I'm confused because I thought I defined the li inside the function.
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<form id="form-input">
<div class="form-group">
<label class="h2 mb-2" for="Enter Task">Enter Task</label>
<input type="text" class="form-control" id="#taskInput" placeholder="Enter your task...">
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
<div class="task-list">
<h3 class="mt-3">Task List</h3>
<ul class="list-group">
</ul>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/732aafddc7.js"></script>
<script src="app.js"></script>
</body>
</html>
<!-- Javascript -->
// select elements
const form = document.querySelector('#form-input');
const taskInput = document.querySelector('#taskInput');
const taskList = document.querySelector('ul.list-group');
function addTask(e) {
// create element
const li = document.createElement('li');
// add class
li.className = 'list-group-item d-flex justify-content-between';
// create text node and append
console.log(li);
e.preventDefault();
}
You need to call the addTask function when you submit:
form.addEventListener('submit', addTask);
Otherwise, the form will perform the default behavior which is sending a request to the current page and reloading the page.
I'm assuming your javascript is actually in another file (app.js ?) and not just part of the html like it is written here.
Related
I am trying to override bootstrap 5's primary color using scss. This works fine until after I click a button that opens an external link.
Here is my scss file:
$primary: #ae217aff;
#import "../node_modules/bootstrap/scss/bootstrap.scss";
Here is my stylesheet import in index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="./html/index.css" />
<link rel="stylesheet" href="./html/animations.css" />
<title>title</title>
<script defer src="../render.js"></script>
</head>
<body>
<form>
<div class="input-group">
<input
type="url"
class="form-control"
placeholder=""
required
/>
<div class="input-group-append">
<button
class="btn btn-outline-primary"
type="button"
id="testBtn"
>
Get Spreadsheet Template
</button>
</div>
</div>
</form>
<script src="../render.js"></script>
<script
src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#4.4.1/dist/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"
></script>
</body>
</html>
And here is the javascript to open the link:
templateBtn = document.getElementById("testBtn");
templateBtn.addEventListener("click", (event) => {
event.stopImmediatePropagation();
window.open(
"",
"_blank"
);
My index.css file is the result of running the command "sass index.scss index.css" (aka compiling to a css file). Here is a before/after photo of the button click:
You should get rid of the cdn version, and just use one scss-compiled version of bootstrap. Take advantage by changing variables of bootstrap AND using their variables in your classes.
From their docs, I also use this approach:
// my-bootstrap-and-styles.scss
// your overrides
$primary : #FEBC35;
// include bootstrap.scss
#import "../node_modules/bootstrap/scss/bootstrap";
// Then add your additional custom code here
.my-primary-div {
background: $primary;
border: 1px solid black;
}
I am making a sample project of Visa Consultancy Software, I am using Javascript, HTML, CSS and Bootstrap and I want to open new page on clicking the home div but I am getting a error i.e eventlistner is null. Kindly help me making my code correct.
JAVASCRIPT FILE
document.querySelector(".btn").addEventListener('click', (e)=>{
document.querySelector(".forget").innerHTML="";
document.querySelector(".password").innerHTML="";
document.querySelector(".email").innerHTML="";
var mail = document.getElementById("maile").value;
var password = document.getElementById("pasw").value;
if (mail == "" && password== "") {
document.querySelector(".forget").innerHTML="Please enter the email id and password";
}
else if (password == "") {
document.querySelector(".password").innerHTML="Please enter the password.";
}
else if (mail==""){
document.querySelector(".email").innerHTML="Please enter the e-mail id";
}
else if (mail=== "himanshusingla256#gmail.com" && password==="1234")
{
window.open("file:///C:/Users/DITSPC3/Desktop/Visa%20Consultancy/Navigation.html");
}
else
{
document.querySelector(".forget").innerHTML="Incorrect email or password";
}
e.preventDefault();
});
function Sidebar()
{
// Container
var onediv= document.createElement('div');
onediv.className= "container1";
onediv.style.background = "lightgray";
onediv.id = "block";
onediv.style.width="20%";
onediv.style.color="white";
onediv.style.overflow="hidden";
onediv.style.display= "inline-block";
document.body.appendChild(onediv);
// row
var row= document.createElement('div');
row.className= "row";
row.id= "row1";
row.style.overflow="hidden";
document.body.appendChild(onediv).appendChild(row);
// column
var one8 = document.createElement('div');
one8.innerHTML="Home";
one8.className="col1 home";
one8.style.fontSize="35px";
one8.style.overflow="hidden";
one8.style.height="158px";
one8.style.paddingLeft="25px";
one8.id="block1";
document.body.appendChild(onediv).appendChild(one8);
var o1= document.createElement('div');
o1.innerHTML="Appointment";
o1.className="col1 appointment";
o1.href="index.html" ;
o1.style.overflow="hidden";
o1.style.fontSize="35px";
o1.style.height="158px";
o1.style.paddingLeft="25px";
document.body.appendChild(onediv).appendChild(o1);
var o2= document.createElement('div');
o2.innerHTML="Manage Documents";
o2.className="col1 document";
o2.style.height="158px";
onediv.style.overflow="hidden";
o2.style.fontSize="35px";
o2.style.paddingLeft="25px";
document.body.appendChild(onediv).appendChild(o2);
var o3= document.createElement('div');
o3.innerHTML="Courses";
o3.className="col1 course";
o3.style.fontSize="35px";
o3.style.overflow="hidden";
o3.style.height="158px";
o3.style.paddingLeft="25px";
document.body.appendChild(onediv).appendChild(o3);
var o4= document.createElement('div');
o4.innerHTML="Applicant Data";
o4.className="col1 applicant";
o4.style.fontSize="35px";
o4.style.overflow="hidden";
o4.style.height="158px";
o4.style.paddingLeft="25px";
document.body.appendChild(onediv).appendChild(o4);
var o5= document.createElement('div');
o5.innerHTML="Log-Out";
o5.className="col1 out";
o5.style.fontSize="35px";
o5.style.overflow="hidden";
o5.style.height="158px";
o5.style.paddingLeft="25px";
document.body.appendChild(onediv).appendChild(o5);
}
// Sidebar();
document.getElementsByClassName(".home").addEventListener('click', ()=> {
window.open("home.html");
});
Navigation Index File
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Navigation Bar</title>
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body class="logo" onload="Sidebar()">
<div class="container" style="max-width: 100%;">
<div class="row" >
<div class="col">
<h5> E-mail= Himanshusingla256#gmail.com</h5>
</div>
<div class="col">
<h5> Contact= 7589832256</h5>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>
Login Index File
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,700" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="style.css" type="text/css">
<title> Singla Visa Consultancy</title>
</head>
<body class="log">
<div class="container2">
<div class="row">
<h1> Visa Consultancy Software </h1>
</div>
<div class="row1">
<form >
<!-- <div class="form-group"> -->
<label for="exampleInputEmail1" style="color: white;">E-mail:</label>
<input type="text" class="form-control" placeholder="E-mail" id="maile">
<label for="email" class="email" style="color: red;"></label>
<!-- </div> -->
<br>
<!-- <div class="form-group"> -->
<label for="exampleInputPassword1" style="color: white;">Password:</label>
<input type="password" class="form-control" placeholder="password" id="pasw" >
<!-- <span toggle="#password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span> -->
<label for="passw" class="password" style="color: red;"></label>
<!-- </div> -->
<br>
<div class="row">
<div style="color: seashell;margin-left: 5% ;">Forget Password?
<br>
<label for="forget" class="forget" style="color: red;"></label>
</div>
</div>
<button type="submit" class="btn btn-success" style="background: transparent;">Login</button>
<br>
<br>
<h6 style="color: white; text-align: right;">Not registered? Create an account</h6>
</form>
</div>
</div>
</body>
<!-- <script src="bootstrap.min.js" type="text/javascript.js"></script> -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="app.js"></script>
</html>[enter image description here][1]
The method document.getElementsByClassName(".home") returns an HTML Collection which don't have an addEventListener method on it, you will need to iterate over each item in the collection and bind it yourself. Also, you don't use the . in the name of the class, so it would be something lke this:
const allElements = document.getElementsByClassName("home"); // <-- No dot in the name
allElements.forEach(home => home.addEventListener('click', () => {
// Do what you want here
window.open("home.html");
})
);
Alternatively, if you know that you will only get one element with that class name or you are only interested in the first element, you can use the querySelector method instead, like so:
document.querySelector(".home").addEventListener('click', () => {
// Do what you want here
window.open("home.html");
});
I am using Google App Script to build a little web app. I'm just at the very start and the page charges well on both Chrome and Firefox but I can't get anything to happen on click of the log in button. I don't get any log to the logger, neither do I get the alert to pop up. Does anyone have any idea why?
This it the HTML of HTML_StockManagementLogInPage:
<!DOCTYPE html>
<html>
<head>
<base target = "_top">
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/yourscript.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="container">
<center><h4> Stock Management Log In </h4></center>
<div class="row">
<center>
<div class="input-field col s3"></div>
<div class="input-field col s3">
<input id="first_name" type="text" class="validate">
<label for="first_name">First Name</label>
</div>
<div class="input-field col s3">
<input id="last_name" type="text" class="validate">
<label for="last_name">Last Name</label>
</div>
</center>
</div> <!-- END OF ROW -->
<div class="row">
<center><button class="btn waves-effect waves-light" type="submit" id="LogInButton">Log In
<i class="material-icons right">send</i>
</button></center>
</div> <!-- END OF ROW -->
</div> <!-- END OF CONTAINER -->
<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/materialize.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
document.getElementByID("LogInButton").addEventListener("click",LogInClicked);
function LogInClicked(){
var UserName1 = {};
UserName1.FirstName = document.getElementByID("first_name").value;
UserName1.LastName = document.getElementByID("last_name").value;
alert(UserName1.FirstName + " " + UserName1.LastName);
google.script.run.UserLoggedIn(UserName1);
} // END FUNCTION LOGIN
</script>
</body>
</html>
And this is the code:
function doGet() {
return HtmlService.createTemplateFromFile("HTML_StockManagementLogInPage").evaluate();
//return HtmlService.createHtmlOutputFromFile("HTML_StockManagementInterfacePage");
}
function InsertHTMLScript(HTMLFilename) {
return HtmlService.createHtmlOutputFromFile(HTMLFilename).getContent();
}
function UserLoggedIn(UserName){
logger.log(UserName.FirstName + " clicked the button");
return HtmlService.createTemplateFromFile("HTML_StockManagementMenu").evaluate();
}
And just in case, this is the HTML for HTML_StockManagementMenu, just displaying a title for now:
<!DOCTYPE html>
<html>
<head>
<base target = "_top">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="container">
<h1> Stock Management Menu </h1>
</div> <!-- END OF CONTAINER -->
<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/materialize.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
I tried earlier to break down my code with the fuction InsertHTMLScript that I have written in the code, inserting <?!= InsertHTMLScript("HTML_CSS"); ?> into the HTML code and it didn't work either. I don't known if it's related but I just resolve not to use it to make things easier.
Thank you in advance
You misspelled getElementById
You have:
document.getElementByID('LogInButton');
It should be:
document.getElementById('LogInButton');
Here is the official docs: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
I want to create a slider in a html file with this bootstrap api, but it keeps showing `jquery-3.1.1.slim.min.js:2 jQuery.Deferred exception: $(...).Slider is not a function TypeError:
$(...).Slider is not a function
at HTMLDocument.<anonymous> (file:///Users/apple/Desktop/pjt/index.html:35:18)
at j (https://code.jquery.com/jquery-3.1.1.slim.min.js:2:30164)
at k (https://code.jquery.com/jquery-3.1.1.slim.min.js:2:30478) undefined
r.Deferred.exceptionHook # jquery-3.1.1.slim.min.js:2
k # jquery-3.1.1.slim.min.js:2
jquery-3.1.1.slim.min.js:2 Uncaught TypeError: $(...).Slider is not a function
at HTMLDocument.<anonymous> (index.html:35)
at j (jquery-3.1.1.slim.min.js:2)
at k (jquery-3.1.1.slim.min.js:2)`
I downloaded both js and css files from here.
this is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/bootstrap-slider.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<header class="nav-header">
</header>
<div class="container">
<div class="row">
<div class="left_section">
<input id="ex6" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3"/>
<span id="ex6CurrentSliderValLabel">Current Slider Value: <span id="ex6SliderVal">3</span></span>
</div>
<div class="middle_section">
</div>
<div class="right_section">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="assets/js/bootstrap-slider.js"></script>
<script>
$(document).ready(function() {
$("#ex6").Slider(); // I also tried .slider()
$("#ex6").on("slide", function(slideEvt) {
$("#ex6SliderVal").text(slideEvt.value);
});
})
</script>
</body>
</html>
I also tried to use CDN to replace the local js and css but nothing changes
Like a slider documentation -- You have 2 ways to use it
var mySlider = new Slider('#ex6');
OR
$('#ex6').slider();
Working example using .slider
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/css/bootstrap-slider.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<header class="nav-header">
</header>
<div class="container">
<div class="row">
<div class="left_section">
<input id="ex6" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3"/>
<span id="ex6CurrentSliderValLabel">Current Slider Value: <span id="ex6SliderVal">3</span></span>
</div>
<div class="middle_section">
</div>
<div class="right_section">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/bootstrap-slider.js"></script>
<script>
$(document).ready(function() {
$('#ex6').slider();
$("#ex6").on("slide", function(slideEvt) {
$("#ex6SliderVal").text(slideEvt.value);
});
})
</script>
</body>
</html>
working example using var myslider = new Slider('#ex6')
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/css/bootstrap-slider.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<header class="nav-header">
</header>
<div class="container">
<div class="row">
<div class="left_section">
<input id="ex6" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3"/>
<span id="ex6CurrentSliderValLabel">Current Slider Value: <span id="ex6SliderVal">3</span></span>
</div>
<div class="middle_section">
</div>
<div class="right_section">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/bootstrap-slider.js"></script>
<script>
$(document).ready(function() {
var mySlider = new Slider('#ex6');
$("#ex6").on("slide", function(slideEvt) {
$("#ex6SliderVal").text(slideEvt.value);
});
})
</script>
</body>
</html>
Note: On my examples I used slider CDN so if your code
not working with your css , js paths you can use CDN instead or check
your paths
Alright, I apologize for not writing my question clearly, so the issue is not from the html file, but from the framework that I am working on.
Since I was using electron, if you just load the html code, the application can not recognize the js files in the html unless you add the following code before and after your scripts.
<!-- Insert this line above script imports -->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<!-- normal script imports etc -->
<script src="scripts/jquery.min.js"></script>
<script src="scripts/vendor.js"></script>
<!-- Insert this line after script imports -->
<script>if (window.module) module = window.module;</script>
Here's the source of the solution on this issue
Write slider instead of Slider
$("#ex6").slider();
And make sure the bootstrap-slider.js file is placed in assets/js/ folder
I got a JavaScript file and a bootstrap form from the internet. On the page there are 2 inputs, when you fill them in it will add the numbers together and put the new number out.
When I tried it out it didn't do anything, in the console I got 2 errors. First one being that bootstraps JavaScript needed jQuery so I added that, and the second one says "Uncaught TypeError: Cannot read property 'addEventListener' of null", and I can't figure out why I get this error.
The form code is:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="test.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container text-center">
<h1>
test title
</h1>
<form action="#" class="form-inline">
<input type="text" id="first"class="form-control" placeholder="Enter your first number">
<input type="text" id="second" class="form-control" placeholder="Enter your second number">
</form>
<h2 id="result"></h2>
</div>
</body>
</html>
The JavaScript code is:
var first = document.getElementById('first');
var second = document.getElementById('second');
var result = document.getElementById('result');
first.addEventListener("input", sum);
second.addEventListener("input", sum);
function sum() {
var one = parseFloat(first.value) || 0;
var two = parseFloat(second.value) || 0;
var add = one+two;
result.innerHTML = "Your Sum is : " + add;
}
So is there maybe anyone who can explain what I'm messing up here?
Add this before because your 'test.js' file is loaded before the DOM elements are loaded.
This is because you javascript file is loading first, than the Dom element is getting created. So when you js loads, it will look up for the elements with first and second which is not there at that time.
var first = document.getElementById('first');
var second = document.getElementById('second');
var result = document.getElementById('result');
first.addEventListener("input", sum);
second.addEventListener("input", sum);
function sum() {
var one = parseFloat(first.value) || 0;
var two = parseFloat(second.value) || 0;
var add = one+two;
result.innerHTML = "Your Sum is : " + add;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="test.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container text-center">
<h1>
test title
</h1>
<form action="#" class="form-inline">
<input type="text" id="first"class="form-control" placeholder="Enter your first number">
<input type="text" id="second" class="form-control" placeholder="Enter your second number">
</form>
<h2 id="result"></h2>
</div>
</body>
</html>
Read below:
Here's what happens when a browser loads a website with a tag on it:
Fetch the HTML page (e.g. index.html)
Begin parsing the HTML
The parser encounters a tag referencing an external script file.
The browser requests the script file. Meanwhile, the parser blocks and stops parsing the other HTML on your page.
After some time the script is downloaded and subsequently executed.
The parser continues parsing the rest of the HTML document.
Visit to see full description:
Where should I put <script> tags in HTML markup?