Find out if a string of text contains a certain letter - javascript

I'm trying to make a little website that will tell you if you suck or don't suck by entering your name. (Sort of dumb, but just for learning purposes.)
The way I thought I'd get it to work would be to check if the name has the vowel "a" in it, but I'm not too sure why this code block won't work:
I also think it'd be helpful to know, for future, how to add a query parameter so it would give each name a unique link.
But nevertheless, here is my code. Any help would be appreciated.
function nameSubmit() {
var nameInput = document.getElementById('checkName');
if (nameInput.contains('a')) {
document.getElementById('ans').innerHTML = "You don't suck!"
} else if (nameInput == "") {
document.getElementById('ans').innerHTML = "Enter a name please";
} else {
document.getElementById('ans').innerHTML = "You suck";
}
}
<!DOCTYPE html>
<html>
<head>
<!-- Links -->
<link href="assets/app.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css">
<script src="https://use.fontawesome.com/97db52ab8f.js"></script>
<link rel="shortcut icon" href="#" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Meta Tags -->
<meta charset="utf-8">
<!-- Title -->
<title>Website Title</title>
</head>
<body>
<input type="text" id="nameCheck">
<button onclick="nameSubmit()">Submit</button>
<p id="ans"></p>
<script src="assets/main.js" type="text/javascript"></script>
</body>
</html>

Here you go. I stripped all the unnecessary html for easier read. Also rearranged the order of your ifs to make more sense :)
function nameSubmit() {
var nameInput = document.getElementById('nameCheck').value.trim();
var output = document.getElementById('ans');
if (!nameInput) {
output.innerHTML = "Enter a name please";
} else if (nameInput.indexOf('a') === -1) {
output.innerHTML = "You suck!"
} else {
output.innerHTML = "You don't suck";
}
}
<input type="text" id="nameCheck">
<button onclick="nameSubmit()">Submit</button>
<p id="ans"></p>

Related

How to reuse a function without refreshing the page

When i use the function to check if number is positive or negative it works fine but when i try to do it again nothing happens i have to refresh the whole page to make it work again. Any help is welcome!
const userNum = document.querySelector(".user-input").value;
const checkBtn = document.querySelector(".check-input");
const result = document.querySelector(".result");
function checkNum() {
if (userNum > 0) {
result.innerHTML = "Positive!!"
}
else if (userNum < 0) {
result.innerHTML = "Negativeee!!"
}
else if (userNum < 0) {
result.innerHTML = "Number is NULL"
}
else {
result.innerHTML = "Enter a Number!!"
}
return false;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="intro">
<h1>A Program to Check if number is <br></h1>
<h2>Positive, Negative or Null</h2>
</div>
<div class="check-number-type">
<input type="text" class="user-input">
<button onclick="checkNum()" class="check-input">Check</button>
</div>
<div class="show-result">
<p class="result"></p>
</div>
</div>
</body>
<script src="/script.js"></script>
</html>
The reason why you say you have to "reload" the page everytime is because your code that extracts the input value was placed outside of your checkNum function that determines if it's positive or negative.
You only retrieve the input once, when the script starts, instead of getting a fresh copy everytime you enter the checkNum function.
Just move this:
const userNum = document.querySelector(".user-input").value;
Inside the checkNum() function.

Keep body scrolled at the bottom unless user scrolls up in javascript

I have a program where the user types in something and then something outputs in the "console." The most recent entered thing stays at the bottom unless the user scrolls up
The body of my document seems to be where I can dd effects like hidden scroll to it. I read another post and used scrollTop and scrollHeight and it is not working.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href = "style.css">
</head>
<body id = "scroll">
<div id="game">
<div id="console">
</div>
</div>
<div id = "command-box">
<div id = "cmd">
<input id = "command" onkeypress = "doAThing(event);">
</div>
</div>
</div>
<script src = "variables.js"></script>
<script src = "code.js"></script>
</body>
</html>
var input = document.querySelector("#command");
var theConsole = document.querySelector("#console");
theConsole.scollTop = theConsole.scrollHeight;
var myScroll = document.getElementById("scroll");
function doAThing(event) {
var theKeyCode = event.keyCode;
if(theKeyCode === 13) acceptCommand();
setInterval(scrollUpdate, 1000);
}
function scrollUpdate() {
myScroll.scrollTop = myScroll.scrollHeight;
}
function acceptCommand() {
var p = document.createElement("p");
if(input.value === "hi") theConsole.append("Hi!", p);
if(input.value === "ping") theConsole.append("Pong!", p);
}

After a button is clicked/form submit, the CSS stylesheet doesn't appear

After the use button is clicked, the sources when I inspect the page show that the style.css page goes away, and no styles are applied. I can't figure out why this is happening.
My index.html page looks like this:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#400;500&family=Roboto:wght#100;300;400;700&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="text" placeholder="First name" class="fname">
<input type="submit" value="Use" class="submit">
<script src="app.js"></script>
</body>
</html>
And my app.js is this:
const useBtn = document.querySelector('.submit');
const reloadBtn = document.querySelector('.btn__reload')
document.body.style.fontFamily = "Roboto;"
useBtn.addEventListener('click', function(){
let person = document.querySelector('.fname').value;
document.write(`<h2>It's ${person}'s turn!</h2>`)
document.write(`<h4>How long will they live?</h4>`)
let oldAge = `<p>${Math.floor((Math.random() * 10)+ 30)}</p>`
document.write(oldAge)
document.write(`<h4>What will be their yearly salary?</h4>`)
let salary = `<p>${Math.floor(Math.random() * 10000)}</p>`
document.write(salary)
document.write(`<h4>What will be their career</h4>`)
const jobs = [ 'plumber', 'doctor', 'witch', 'president', 'trump supporter']
let job = Math.floor(Math.random() * jobs.length)
document.write(jobs[job])
redoBtn();
})
function redoBtn(){
let tryAgain = document.createElement('button')
document.body.appendChild(tryAgain)
let buttonText = document.createTextNode('Try Again')
tryAgain.appendChild(buttonText)
tryAgain.addEventListener('click', function(){
window.location.href = window.location.href;
})
}
Any help is so appreciated!
Your document.write is overwriting all your html, including your linked stylesheet.
From https://developer.mozilla.org/en-US/docs/Web/API/Document/write:
Note: as document.write writes to the document stream, calling document.write on a closed (loaded) document automatically calls document.open, which will clear the document.
If you really want to use document.write, you'll need to rewrite your stylesheet link into the new document. But it might be better to just replace the html of some container element on your page, like the body element.
Instead of using document.write which overwrites your html you could try this approach:
<input type="submit" value="Use" class="submit">
<!-- add new div to show the result -->
<div id="result"></div>
<script src="app.js"></script>
And in the click event:
useBtn.addEventListener('click', function(){
let person = document.querySelector('.fname').value;
let res = document.getElementById('result');
res.innerHTML = "<h2>It's "+person+"'s turn!</h2>";
// add further information to innerHTML here
// hide input fname and submit button
redoBtn();
})

Inserting div right after wrapper div

So as the title says I'm trying to insert 'cookie' warning right after my wrapper div. I've tried using append as well but it adds the code after everything else is executed so div id wrapper lots of code and then at the end cookiebar div
var cname = "consentCookie";
var cvalue = "on";
var exdays = "20";
var cookiehtml = '\
<div id="cookiebar">\
We use cookies to track usage and preferences. \
I Understand.\
</div>';
function setCookie() {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
$('#cookiebar').hide();
}
function getCookie() {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
}
return "";
}
$(document).ready(function(){
if(getCookie() == ''){
$('#wrapper:first-child').after(cookiehtml);
}
else if(getCookie() == 'on'){
$('#cookiebar').hide();
}
});
and HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="icon" type="image/ico" href="assets/logo/logo.ico">
<link rel="stylesheet" style="text/css" href="../cookiebar/cookiebar.css">
<link rel="stylesheet" style="text/css" href="css/styles.css">
<link rel="stylesheet" style="text/css" href="css/fonts.css">
<link rel="stylesheet" style="text/css" href="css/navigation_bar.css">
<link rel="stylesheet" type="text/css" href="css/lato_font.css">
<script src="js/jquery.min.js"></script>
<script src="../cookiebar/cookiebar.js"></script>
<script src="js/jquery.color-RGBa-patch.js"></script>
<script src="js/navigation_bar.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="League of Legends patch notes in a minimalistic and modern way.">
<meta name="keywords" content="league, of, league notes,legends, patch, notes, leaguenotes,Patch '.$Patch_No.' ">
<meta name="author" content="Kacper Turon">
<title>LeagueNotes - '.$Patch_No.'</title>
</head>
<body>
<div id="wrapper"></div>
I left just most important bits of code cuz there are loads of it
UPDATE: I've added the function that i use to create cookies and hide the bar, I've tried every suggestion so far and the cookiebar div lands next to wrapper as a sibling so
<div id="wrapper">
</div>
<div id="cookiebar">
</div>
And i want it to be as the first child in wrapper
Firstly, I'm not sure you're using :first-child as intended. You should probably be using simply :first or :eq(0).
But even still, you probably want to use insertAfter() rather than after().
$(document).ready(function(){
if(getCookie() == ''){
$('#wrapper:first-child').after(cookiehtml);
}
...
should thus be:
$(document).ready(function(){
if(getCookie() == ''){
$(cookiehtml).insertAfter( '#wrapper');
}
...
http://jsfiddle.net/grh1w80q/1/
Or if you prefer cookiehtml to be first node of parent #wrapper, use prependTo():
$(document).ready(function(){
if(getCookie() == ''){
$(cookiehtml).prependTo( '#wrapper');
}
...
http://jsfiddle.net/grh1w80q/2/
If you want cookiehtml to be the first element inside the wrapper div, in jQuery you can use prepend:
if(getCookie() == ''){
$('#wrapper').prepend(cookiehtml);
}
this would make the HTML DOM look something like:
<div id="wrapper">
<div id="cookiebar">
...
</div>
...
</div>

Need help for a getInput function

I've been having trouble with my javascript code.
<!DOCTYPE html>
<html>
<head>
<title>js-game</title>
<script src="script.js" type="text/javascript"></script>
<script src="story.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css"/>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="game">
<ul id="output">
<li onclick="main()">Click here to start!</li>
</ul>
<input autofocus id="inputLine" type="text">
<p onclick="" id="enterInput">ENTER</p>
</div>
</body>
</html>
// Variables
var log="<li>Hello</li>";
var lastVar="";
// Functions
function getInput() {
document.getElementById("enterInput").addEventListener("click", function() {
return document.getElementById("inputLine").value;
document.getElementById("inputline").value="";
});
}
function output(output) {
log=log + "<li>" + output + "</li>";
document.getElementById("output").innerHTML=log;
}
function main() {
output("What's your name?");
alert(getInput());
}
As you can probably see I want to get input from a <input type="text"> with the id of inputLine. And a button with the id of enterInput.
But all I get back is undefined, and I've been working on this for a long time, so I'm getting frustrated.
Sorry for bad english.
Try doing it like so:
document.getElementById("enterInput").addEventListener("click", getInput );
function getInput() {
var val = document.getElementById("inputLine").value;
//do something with val
document.getElementById("inputLine").value="";
return val;
}
See this demo
Or to fetch it as a variable with getInput():
document.getElementById("enterInput").addEventListener("click", function(event){
var val = getInput();
alert(val);
});
function getInput() {
var val = document.getElementById("inputLine").value;
document.getElementById("inputLine").value="";
return val;
}
See this demo

Categories