I am a real beginner at codding in general. I would like to create a website that people can go onto and choose a character of a play we are doing. I would then like to prompt for their full name so that I can create a file in the folder for that button, that is under their name. In that same prompt I would like to type it "/WINNER/" and have that give me back a random name (file name) from that button's folder. I hope that makes scene, and I know that I might be making this overly complicated bet this is that only way I found of doing this. Also sorry if my code looks a little wonky, like I said I am a complete noob.
My index.html
<head>
<title>Check Please | Enter</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
<link href='http://fonts.googleapis.com/css?family=Gafata|Metrophobic' rel='stylesheet' type='text/css' media="all">
</head>
<body>
<div id="Welcome">
<div id="WelcomeMessage">
<h5 class="redCenter">Welcome to the voting website of</h5>
<h3 class="Musical">'Check Please the Musical'</h3>
</div>
<div id="Enter-Img">
<a href="choice.html">
<img src="images/site/enter.png" width="438" height="241" class="button">
</a>
</div>
</div>
</body>
Then my choice.html
<head>
<title>Check Please | Voting</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
<link href='http://fonts.googleapis.com/css?family=Gafata|Metrophobic' rel='stylesheet' type='text/css' media="all">
</head>
<body>
<div id="Top">
<h3 class="Musical">Please click on one of the following characters that you believe to be the murderer, and then enter your full name.</h3>
</div>
<div id="Button 1">
<a href="Button 1/Button1.html">
<img src="images/site/Person 1.png" width="438" height="241" class="enter">
</a>
</div>
<div id="Button 2">
<a href="Button 2/Button2.html" onclick="Name = prompt('Enter your first and last name')">
<img src="images/site/Person 2.png" width="438" height="241" class="enter">
</a>
</div>
<div id="Button 3">
<a href="Button 3/Button3.html" onclick="Name = prompt('Enter your first and last name')">
<img src="images/site/Person 3.png" width="438" height="241" class="enter">
</a>
</div>
<div id="Button 4">
<a href="Button 4/Button4.html" onclick="Name = prompt('Enter your first and last name')">
<img src="images/site/Person 4.png" width="438" height="241" class="enter">
</a>
</div>
</body>
And right now I have only tried to mess around with one button (Button1.html):
<head>
<title>Check Please | Thanks and Enjoy</title>
<link href="../css/styles.css" rel="stylesheet" type="text/css" media="screen">
<link href='http://fonts.googleapis.com/css?family=Gafata|Metrophobic' rel='stylesheet' type='text/css' media="all">
</head>
<body>
<script type="text/javascript">
window.onload(Name = prompt("Enter your first and last name below"))
import java.io.PrintWriter;
if(Name == "/WINNER/") {
window.location.replace("http://stackoverflow.com");
}else{
import java.io.PrintWriter;
PrintWriter writer = new PrintWriter(Name + ".txt", "UTF-8");
writer.close();
};
</script>
<div>
<h3 class="Musical">Button 1</h3>
</div>
<div>
</div>
</body>
Thanks for ANY input!!!!!!!
You appear to be writing Java in a JavaScript context. I'll make one thing very clear: JavaScript is not related to Java. They are completely separate languages, and as such you cannot use Java libraries.
Also, you can't write out to any directories using JavaScript. JavaScript runs in the user's browser, which is separate from the server (you cannot access files within directories on the server)
Related
Good day to all time of day, there was such a problem:
in index.jsp passing the answer.jsp, here's the code:
index.jsp
<head>
<meta charset="UTF-8">
<title>Lab 2</title>
<link rel="stylesheet" href="css/graphic.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/table.css">
</head>
<body>
<div class="hero">
<jsp:include page="jsps/hero.jsp"/>
</div>
<div class="graphic">
<jsp:include page="jsps/graphic.jsp"/>
</div>
<div class="form-container">
<jsp:include page="jsps/forms.jsp"/>
<button id="checkButton">Проверить</button>
<div id="outputContainer">
<span class="outputStub notification">Результаты отсутствуют</span>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/checkboxHandler.js"></script>
<script src="js/formValidator.js"></script>
<script src="js/graphicValidator.js"></script>
<script src="js/session.js"></script>
<script src="js/table.js"></script>
</body>
answer.jsp
<%# page contentType="text/html;charset=UTF-8"%>
<div class="table">
<div class="table-header">
<div>X</div>
<div>Y</div>
<div>R</div>
<div>Входит ли в ОДЗ?</div>
</div>
<div class="table-content">
<script>
console.log("1111111111")
AddInSession(${x}, ${y}, ${r}, ${result ? "<div style=\"color: green\">Да</div>" :
"<div style=\"color: red\">Нет</div>"})
</script>
<div class="table-row" id="table-row">
</div>
<script>Table()</script>
</div>
</div>
I need to pass values through the context and I did it, and I also need to return an answer.jsp, here is the code for one of the servlets
ServletContext context = getServletContext();
context.setAttribute("x", object.getX());
context.setAttribute("y", object.getY());
context.setAttribute("r", object.getR());
context.setAttribute("result", object.getResult());
getServletContext().getRequestDispatcher("/jsps/answer.jsp").forward(request, response);
The browser sees the js code, but does not execute it. My concern is not so much that my methods are not being executed, but that console.log is also not producing results.
Can someone explain what I'm doing wrong?
P.S in index.jsp code is being executed
Full Code at Last/end
I have been working on a project,
So for landing page I wanna make a hero i.e. fade in and out slideshow using JavaScript.
BRIEF:
What I want:-
I have set a variable to get a random number between 1 and 3, so after depending upon the random number, the image of hero, the quote inside the hero and author name would change using Js!
Problem:-
<div class="hero-1" >
<img class="hero-img-1" id="slideshow_background" alt="slideshow photo" src="images/hero-1.jpg" >
<h2 id="quote_h2" >
<span class="quotation" >“</span>
Don't worry about people stealing your design work.
Worry about the day they stop.
<span class="quotation" >”</span>
</h2>
<span class="author" >
<h4 id="author_h4" >–Sohel Shekh</h4>
</span>
</div>
I want to change the text of quote depending upon the random number (i.e. 1-3)
But as the span element is there, which is for "
So if I
quote_txt.innerHTML = "New Quote";
It removes / cancels the <span> element which contains the " quotation marks!
What should I do now so that it only changes the actual text not the <span> present inside the <h3>??????
Please answer if anybody finds solution:
Full HTML Code:
var slideshow_timing = 4000;
var quote_txt = document.getElementById("quote_h2");
var author_name = document.getElementById("author_h4");
var starting_Status = Math.floor((Math.random() * 3) + 1);
var slideshow_Background = document.getElementById("slideshow_background");
if (starting_Status == 1) {
slideshow_Background.src = "images/hero-1.jpg";
} else {
alert("t")
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width" , initial-scale="1.0" user-scalable="no" />
<title>Sohel Editz : Home</title>
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;500;600;700&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght#0,400;0,700;1,400;1,700&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bellota:ital,wght#1,700&display=swap">
<link rel="stylesheet" href="css/slick-theme.css">
<style type="text/css">
* {
margin: 0px;
padding: 0px;
background-color: #fff;
font-family: 'Montserrat', sans-serif;
;
}
</style>
</head>
<body>
<!-- Main div element for all the page elements -->
<div class="main_Top">
<div class="nav" id="nav">
<img class="nav-cont nav-menu" alt="menu" src="images/menu.svg" id="menu" onclick="menuOpt()">
<!-- <img class="nav-img" alt="logo" src="images/logo.png" id="logo" > -->
<h2 class="nav-cont nav-logo">Sohel Editz</h2>
<img class="nav-cont nav-account" alt="account" src="images/account.svg" id="account" onclick="accountOpt()">
</div>
<div class="navbar" id="navbar">
<ul>
<li>Apply for logo</li>
<li>Login</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
<div class="account-bar" id="account-bar">
<img id="profile_img" src="images/defaultProfileImg.svg">
<i class="fa fa-edit" id="edit_pencil"></i>
<div id="details" class="details">
<h2 id="user_name">Example Name</h2>
<h5 id="useremail">someone#example.com</h5>
</div>
</div>
<!-- Span element for reserving space-->
<div class="headerSpace">
</div>
<div class="hero">
<!-- Hero 1 -->
<div class="hero-1">
<img class="hero-img-1" id="slideshow_background" alt="slideshow photo" src="images/hero-1.jpg">
<h2 id="quote_h2">
<span class="quotation">“</span> Don't worry about people stealing your design work. Worry about the day they stop.
<span class="quotation">”</span>
</h2>
<span class="author">
<h4 id="author_h4" >–Sohel Shekh</h4>
</span>
</div>
</div>
</div>
<script type="text/javascript">
</script>
</div>
</body>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="js/index.js"></script>
<script src="js/slick.min.js"></script>
</html>
Yes, the problem you have with using .innerHTML is that it will clear the element. It doesn't matter what's inside it, it will be overwritten with what you set it to.
In your case, you have a couple of options:
Move your text into a container so you can select it and update it
After you get your h2 element, find the exact Text Node you want to update and use .replaceWith
Example with replaceWith:
const h2Quote = document.getElementById('quote_h2');
// Find the Text Node you want to update, in this case, index 2
h2Quote.childNodes[2].replaceWith('Test');
<h2 id="quote_h2">
<span class="quotation">“</span>
Don't worry about people stealing your design work. Worry about the day they stop.
<span class="quotation">”</span>
</h2>
The key thing is to keep in a variable the related <span> element which represents the quote.
I think the following can work for you:
const quotation = '<span class="quotation">“</span>';
const quote_txt = document.getElementById('quote_h2');
const quote = 'New Quote';
quote_txt.innerHTML = `${quotation}${quote}${quotation}`;
// or: quote_txt.innerHTML = quotation + quote + quotation;
<h2 id="quote_h2" >
<span class="quotation" >“</span>
Don't worry about people stealing your design work.
Worry about the day they stop.
<span class="quotation" >”</span>
</h2>
I hope that helps!
I am working on a very basic HTML page that has a little bit of Javascript functionalities. Nothing fancy, just some DOM manipulation. Everything was working fine and then all the scripts magically stopped working. Upon looking into firebug, it seems as though this script is working fine:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
These two references, however, don't seem to load up at all anymore:
<script src="/Bootsrap/bootstrap.js" type="text/javascript"></script>
<script src="custom.js" type="text/javascript"></script>
custom.js is in the root directory and the other is in a Bootstrap folder. Everything was fine yesterday until it wasn't and I can't get it to work again.
function betterWork(this) {
if(confirm("Is this your final selection?"))
{
// document.location = '#';
$("#myModal").modal("show");
}
}
function youCantDoThat() {
alert("That isn't a Pokemon ya doof.");
}
function tooDamnBad() {
var changeText = document.getElementById("textToChange");
var newText = document.getElementById("newText");
changeText.innerHTML = "Too Damn Bad!";
newText.innerHTML = "Pick One Anyways :)";
}
.imageSize {
width: 400px;
height: 400px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>JS Project</title>
<link rel="stylesheet" href="Bootstrap/bootstrap.css">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="col-lg-12">
<h1 class="text-center" id="textToChange">Pick A Starter Pokemon</h1>
<h3 id="newText" class="text-center"></h3>
</div>
<div class="col-lg-12">
<div id="img" onclick="betterWork()" class="imageSize col-lg-4">
<img class="imageSize" src="http://assets19.pokemon.com/assets/cms2/img/pokedex/full//001.png" />
</div>
<div id="img" onclick="betterWork()" class="imageSize col-lg-4">
<img class="imageSize" src="http://vignette3.wikia.nocookie.net/pokemon/images/1/13/007Squirtle_Pokemon_Mystery_Dungeon_Explorers_of_Sky.png/revision/latest?cb=20150105230449" />
</div>
<div id="img" onclick="betterWork()" class="imageSize col-lg-4">
<img class="imageSize" src="http://static.giantbomb.com/uploads/scale_small/0/6087/2438704-1202149925_t.png" />
</div>
<div id="img3" onmouseover="youCantDoThat()" class="imageSize col-lg-4">
<img class="imageSize" src="http://41.media.tumblr.com/c38fff03b8dd7aaf75037eb18619da57/tumblr_n436i3Falo1sndv3bo1_1280.png" />
</div>
<div id="img4" onclick="betterWork()" class="imageSize col-lg-4">
<img class="imageSize" src="http://assets.pokemon.com/assets/cms2/img/pokedex/full/010.png" />
</div>
<div id="img5" onclick="betterWork()" class="imageSize col-lg-4">
<img class="imageSize" src="http://vignette2.wikia.nocookie.net/camphalfbloodroleplay/images/7/77/Pikachu.png/revision/latest?cb=20141004224742" />
</div>
<br />
<div class="text-center">
<button type="button" class="btn btn-info btn-lg" onclick="tooDamnBad()">I Don't Like These Pokemon</button>
</div>
</div>
<footer></footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/Bootsrap/bootstrap.js" type="text/javascript"></script>
<script src="custom.js" type="text/javascript"></script>
</body>
</html>
Diagnosing why a script is not loading should begin with opening your console, looking at the resources tab, and determining whether and why the browser had an error loading the script.
Alternatively you can open the script from your browser directly and your webpage will notify you. For example, if your script is located at the path /Bootstrap/bootstrap.js and your host name is localhost, navigate to localhost/Bootstrap/boostrap.js.
Interpreting the results:
if the result is a 403 error it means that your webserver is not able to open this file. You will need to grant read access to your webserver.
if the result is a 404 error it means that the file is actually not at the path you specified. You will need to debug step by step and figure out why. An additional stack overflow question may resolve this if needed.
if the result is a different error, the meaning of it can be googled and you can comment and ask for additional clarification
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <!-- Bootstrap -->
<title>Sean Kim</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
<!--<![endif]-->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="css/stylesheet.css">
<script src="js/jquery-2.1.4.min.js"></script>
</head>
<body>
<div class="custom-menu-wrapper">
<div class="pure-menu custom-menu custom-menu-top">
Sean Kim
<s class="bar"></s><s class="bar"></s>
</div>
<div class="me" id="home">
<br><br><br>
<h1 class="name">SEAN KIM</h1>
<hr>
<h6 class="intro">14 year-old programmer/student at Bergen County Academies</h6>
<div class="element"></div>
<img src="images/nyc.jpg" class="img-responsive nyc">
</div>
<div id="about">
<h2 class="about-text">About Me</h2>
<img src="images/golf.png" align="left"class="propic">
<p class="info">My name is Sean Kim and I'm a freshman at
<a href="http://bcts.bergen.org/index.php/bergen-county-academies" class="bca">
Bergen County Academies
</a> in the Academy of Technology and Computer Science (ATCS).
</p>
</div>
<div id="skills">
<h2 class="skills-text">Skills</h2>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-4 html5">
<img src="images/logos/html5.png" alt="HTML 5" width="106" height="150">
<p class="languages">HTML 5</p>
</div>
<div class="pure-u-1 pure-u-md-1-4 css3">
<img src="images/logos/css.png" alt="CSS3" width="106" height="150">
<p class="languages">CSS3</p>
</div>
<div class="pure-u-1 pure-u-md-1-4 python">
<img src="images/logos/python.png" alt="PYTHON" width="150" height="150">
<p class="languages">PYTHON</p>
</div>
</div>
</div>
</div>
<div class="contact-container" id="contact">
<h2 class="contact-text">Contact Me</h2>
<div class="pure-g contact">
<div class="pure-u-1 pure-u-md-1-4 Facebook">
<a href="https://www.facebook.com/seankim327" target="_blank" class="icon">
<i class="fa fa-facebook-square fa-5x"></i>
</a>
</div>
<div class="pure-u-1 pure-u-md-1-4 Instagram">
<a href="https://www.instagram.com/seankim.co.kr" target="_blank" class="icon">
<i class="fa fa-instagram fa-5x"></i>
</a>
</div>
<div class="pure-u-1 pure-u-md-1-4 Twitter">
<a href="https:/www.twitter.com/sean_d_kim" target="_blank" class="icon">
<i class="fa fa-twitter-square fa-5x"></i>
</a>
</div>
<div class="pure-u-1 pure-u-md-1-4 GitHub">
<a href="https://github.com/seankim327" target="_blank" class="icon">
<i class="fa fa-github-square fa-5x"></i>
</a>
</div>
</div>
<script>
function sendMail(email, subject, content) {
$.ajax({
type: 'POST',
url: 'https://mandrillapp.com/api/1.0/messages/send.json',
data: {
'key': 'goYVUvLoJH3ICbEMgIA-ow',
'message': {
'from_email': email,
'to': [
{
'email': 'seandyk#gmail.com',
'name': 'Sean Kim',
'type': 'to'
}
],
'autotext': 'true',
'subject': subject,
'html': content
}
}
}).done(function(response) {
if (response[0].status == "rejected") {
document.getElementById("<div id="about"></div>").innerHTML = "Please enter valid fields";
} else {
document.getElementById("<div id="skills"></div>").innerHTML = "Sent!";
}
});
}
</script>
</div>
</body>
</html>
I asked my friend who's good with JavaScript to write me code that can send emails, so he used the Mandrill API and wrote me one. But he told me to replace the <Empty Div> with "empty divs" or I need a span to output to. I have no idea what that means. Can someone help?
An Empty div is one that had both an open and close but has no contents or other elements as contents between that open and close.
The Div in question that your friend was referring to in the code is:
<div class="element"></div>
It is located just under the line that has the text
14 year-old programmer/student at Bergen County Academies
He's saying that in your html, you need to create a div tag. He's basically saying "hey, my code is going to do something and you need to create a div tag in your html page so that my code can put it into it. Once you create this div tag, go to the code I gave you and replace the <Empty Div> with whatever you labled the id as.
<div id="myDiv"></div>
Then, in the code that your friend gave you, replace <Empty Div> with the id attribute (myDiv)
In short use an id attribute, say, "email-status", on an element in your HTML body where you want the status update to appear. Reference it using document.getElementById('email-status').
Here is a more detailed explanation with links for more information.
Both div, which is a block element (which by default appears separated by newlines from surrounding text), or a span, which is an inline element, are HTML tags that are regularly referenced and manipulated in Javascript.
When you want to replace the content of a specific element you typically create a selector using an id attribute. The id value cannot have spaces and should be unique among all id values in the document.
For example, an HTML div with an id of "mail-response" would simply be written:
<div id="mail-status"></div>
This div above would be placed in the HTML document body where you want your status message to appear.
While you could use a class attribute as your selector as another reply suggested, in this case it is not ideal. The class attribute is not necessarily unique as it was initially intended to apply CSS formatting to one or more elements. Generally speaking there may be other times when you want to use Javascript to select all tags with a particular class. In your particular case, you want to target one particular location so an id is more appropriate.
To select a div based on its id you can use document.getElementById like you did, but it simply takes a parameter of the id value you want to select.
document.getElementById("mail-response").innerHTML = "Entry is <b>invalid</b>";
In your example, the done function reads:
function(response) {
if (response[0].status == "rejected") {
document.getElementById("<div id="about"></div>").innerHTML = "Please enter valid fields";
} else {
document.getElementById("<div id="skills"></div>").innerHTML = "Sent!";
}
}
Note that there are two problems here. First is that the getElementById simple takes an id value as its parameter not an HTML snippet. Second, is that you had unescaped double quotes within a double-quoted string.
A minimal correction would be to change the block to reference the existing value and skills divs directly.
function(response) {
if (response[0].status == "rejected") {
document.getElementById("about").innerHTML = "Please enter valid fields";
} else {
document.getElementById("skills").innerHTML = "Sent!";
}
}
Note however, that the about and skills element currently contain content. Replacing the innerHTML will remove the content currently in those elements. Based on your other comments it sounds like rather than replacing the existing blocks you would prefer to insert the status update into an initially empty element that has been set aside for the status update.
Finally, I would suggest that if you in fact posted your actual mandrill API key, that you change it immediately.
When you click on print note, I am expecting another window to pop-up with the notes you took. In my case, it keeps showing up blank.
Please let me know if I should provide more details:
Page(1) with the text area
<textarea id="sermon_notes" cols="5" rows="5"></textarea>
<span>Print Notes</span>
Page(2) with javascript trying to pull the information you wrote on page(1) so it can show up on page(2)
<html>
<head>
<title>Media | New Foundation Christian Ministries </title>
<link rel="stylesheet" href="../css/popout.css" media="screen" type="text/css" />
<link rel="stylesheet" href="../css/print.css" media="print" type="text/css" />
</head>
<body class="about">
<div class="wrap">
<div class="header">
<span>Print</span>
<h1><img src="../images/logo.png" alt="New Foundation Christian Ministries" /> </h1>
</div>
<div class="content">
<div class="page_header">
<h2>Notes</h2>
</div>
<h1></h1>
<h1>some text</h1>
<small>ate</small>
<br/><br/><br/>
<h3>My Notes:</h3>
<p>
<script type="text/javascript">
// Get the notes from the parent page
var message_notes = window.opener.document.getElementById('sermon_notes').value;
// Replace out the new line character with a <br>
message_notes = message_notes.replace(new RegExp( "\\n", "g" ),"<br />");
document.write(message_notes);
</script>
</p>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
I got it, my above code work just fine, is the fact my link did not contain the http but rather files. it would not work unless you have http, so it wont work on your local server.
Thank you all for helping.