Fixing my javascript search bar - javascript

So I was programming my search bar and I can't quite know why it's not working. I am wanting when a user types "forums" it says a message and when they click okay it sends them to the forums, but I was testing to see if it would display the alert it and I couldnt get it to say anything.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>website name / slogan</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css" />
</head>
<body>
<div class="row">
<div class="span12">
<form method="get" action="/" class="form-inline" >
<input name="q" class="span5" id="searchBar" type="text" placeholder="Click below on how to use" />
<button type="submit" id="submit" class="btn btn-primary"> <i class="icon-search icon-white"></i></button>
</form>
</div>
</div>
<script type="text/javascript" src="js/bootstrap.js"></script>
</body>
Javascript
function myNavSystem() {
var mySearchBar = document.getElementById('searchBar');
if(mySearchBar = "forums")
document.getElementById('submit');
alert("you have tried accessing forums")
else
alert("You have entered invalid text, try again.")
}

One obvious mistake is that you forgot curly braces in your if / else statement (and semicolons).
if(mySearchBar.value == "forums") {
document.getElementById('submit');
alert("you have tried accessing forums");
} else {
alert("You have entered invalid text, try again.");
}

Related

Uncaught TypeError: jQuery(...).datetimepicker is not a function

I have a code to generate a normal date time picker, but it is throwing me this error Uncaught TypeError: jQuery(...).datetimepicker is not a function
Can anyone help me, i guess it is because of arrangment of links and bootstrap , but i don't have a clear picture of it.
below is my code
<html>
<head>
<link rel="stylesheet" href="jquery.datetimepicker.css">
<script src="jquery-1.8.2.min.js"></script>
<!-- <script src="jquery-ui.js"></script> -->
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<script src="jquery.datetimepicker.js"></script>
<script src="jquery.validate.min.js"></script>
<link rel="stylesheet" href="fonts/icomoon/style.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script>
$(document).ready(function() {
jQuery('#datevalue').datetimepicker();
jQuery('#completed').datetimepicker();
});
</script>
</head>
<body>
<form action="#" method="post">
<div id="AlignMainDiv">
<div class="form-group last mb-4">
<label for="date">Date</label>
<input type="text" class="form-control" id="datevalue">
</div>
<div class="form-group last mb-4">
<label for="username">Completed Date and Time</label>
<input type="text" class="form-control" id="completed">
</div>
</div>
</form>
</body>
</html>
Press F11, open the Chrome debug, go to Network > JS tab and check if any of the included js libraries return a 404 status. Maybe you misspelled a script name or URL path.
You can also try to include the libraries directly from CDNs:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<script>
$( function() {
$('#datevalue').datetimepicker();
$('#completed').datetimepicker();
} );
</script>
</head>
I dont know whether your datetimepicker library is loading or not.
You can use following CDN.
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.full.min.js"></script>
Following code will load todays date and will show datepicker on input click
<script>
$(document).on("click", "#datevalue" , function() {
$(this).datetimepicker({
timepicker:false, format:"d-m-Y","setDate": new Date(),
}).focus();
});
</script>

Input not being added to array (beginner) JavaScript

When text is written into the input box and then the button is clicked, I want the text (value) to be added to the array I have created for it (the array is called 'subject'). The text (value) from the input box is not being added... why?
var subject = [];
function addSubjects() {
namesInputted = document.getElementById('namesInputter').value;
subject.push(namesInputted);
console.log(subject);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Prueva tu Suerte</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form class="" action="index.html" method="post">
<input type="text" id="namesInputter" value="">
<button onclick="addSubjects()">Add Player</button>
</form>
<span id='S'></span>
<span id='V'></span>
<span id='O'></span>
<span id='P'></span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="function.js"></script>
</body>
</html>
Actually, You code is working. The input value is appending to the array. But the Issue is, You are using form. So when you click the button, It will submit the form right after add the value to array. So page will refresh and the array will become empty.
Just remove form tag, if you don't want to submit data.
var subject = [];
function addSubjects() {
namesInputted = document.getElementById('namesInputter').value;
subject.push(namesInputted);
console.log(subject);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Prueva tu Suerte</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<input type="text" id="namesInputter" value="">
<button onclick="addSubjects()">Add Player</button>
<span id='S'></span>
<span id='V'></span>
<span id='O'></span>
<span id='P'></span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="function.js"></script>
</body>
</html>
If you want to use form submit with jQuery, you can use like this:
Html
<form>
<input type="text" id="namesInputter" value="">
<button type="submit">Add Player</button>
</form>
JavaScript
var subject = [];
function addSubjects(e) {
}
$("form").submit(function(e){
e.preventDefault();
namesInputted = document.getElementById('namesInputter').value;
subject.push(namesInputted);
console.log(subject);
});

Java Script not working in Google App Script 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

how to make javascript style change last

I have something like this for index.html
<!DOCTYPE html>
<html>
<head>
<title>Game</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
</head>
<body>
<h2 class= "question1">How many letters are in "hello" ?</h2>
<form class="answers">
<input type="submit" name="answer1" value="1" class="answer" onclick="wrongAnswer(this.name)">
</form>
</body>
<script src="JavaScript.js"> </script>
</html>
and this is the JavaScript.js
function wrongAnswer(name)
{
document.getElementsByName(name)[0].style.backgroundColor = "red";
}
when the button is pressed the background gets red but it doesn't last. It goes away in about 1 second. I want it to be changed as long as the page is not refreshed. How to do that ?
Thanks for your time
You are using a submit button input. When it is pressed, the browser tries to send the form's data to a server and this reloads the page. You can use a button element instead:
<h2 class= "question1">How many letters are in "hello" ?</h2>
<button name="1" onclick="wrongAnswer(this.name)">1</button>
Your form element is triggering a page refresh on submission of it's contents.
This is normal.
Typical practice is to intercept said form's onSubmit event and preventDefault().
See below for a practical example.
Note the handleSubmit() and onSubmit references in the respective JavaScript and HTML portions of the following code.
// Handle Submit.
function handleSubmit(event) {
event.preventDefault() // Prevent Default.
}
// Wrong Answer.
function wrongAnswer(name)
{
document.getElementsByName(name)[0].style.backgroundColor = "red";
}
<html>
<head>
<title>Game</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
</head>
<body>
<h2 class= "question1">How many letters are in "hello" ?</h2>
<form class="answers" onSubmit="return handleSubmit(event)">
<input type="submit" name="answer1" value="1" class="answer" onclick="wrongAnswer(this.name)">
</form>
</body>
<script src="JavaScript.js"> </script>
</html>

onblur name field

I can't seem to find a way to get the javascript to take the inputted name I put in the box to make it appear where the paragraph is as output when the onblur event happens.
<!DOCTYPE html>
<!--
INFX1606 - Starter kit for Assignment 5.
-->
<head>
<meta charset="utf-8">
<meta name="author" content="Joey Fultz">
<meta name="description" content="Assignment 5">
<title>First Swing at Javascript</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="js/scripts.js"></script>
</head>
<body>
<div class="all">
<div class="title">
<h2>Javascript</h2>
</div>
<div>
<h3>Name and Banner</h3>
</div>
<span>
<label for="namebanner">Name:</label>
<input type="text" id="namebanner" name="namefield" onblur="showname() value">
</span>
<p id="p1"></p>
</div>
</body>
</html>
function showname() {
var x = document.getElementById("namebanner");
x.value = x.value.to("p1");
}
I want to know why my javascript is wrong and why it won't show my name when the onblur event happens.
This is quite easily done with JQuery
<input type="text" id="namebanner" name="namefield" />
<script>
$(function(){
$('#namebanner').blur(function(){
$('#p1').text( $(this).val() );
});
});
</script>
or in plain javascript
<script>
function showname(){
var x = document.getElementById("namebanner");
document.getElementById("p1").innerHTML = x.value;
}
</script>

Categories

Resources