I'm trying to build a calculator that calculates various dates based on a user's input. The user selects the date of when a document was issued and then 2 things need to happen:
The expiry date is calculated by adding X number of days to the date issued and displayed to the user
The recommended application date is calculated based on the expiry date minus X number of days
The first one I got working (not in a very elegant way but it works for this part)
The second part (recommended application date), I can't get to work. I've done a lot of research and can't find a solution. (I'm a beginner)
I'm thinking maybe "onchange" is perhaps not the right event but I can't find information on another event that applies to this situation. Or is it an issue with how the functions are structured? Or something else completely? I have also tried moment.js and a few other libraries but what I have in the codepen below is what have gotten me the furthest thus far.
The codepen with everything is here: https://codepen.io/locheia1985/pen/XWBMGXZ
And here is the code:
function setSecondDate() {
var days = document.getElementById('select').value;
var date = new Date(document.getElementById('date1').value);
date.setDate(date.getDate() + parseInt(days));
document.getElementById('date2').valueAsDate = date;
}
function setThirdDate() {
var days3 = document.getElementById('select2').value;
var date2 = new Date(document.getElementById('date2').value);
date2.setDate(date2.getDate() - parseInt(days3));
document.getElementById('date3').valueAsDate = date3;
console.log(date2);
}
body
{
font-family:sans-serif;
background: #dde1e7;
min-height: 100vh;
}
.center,.content
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.click-me
{
display:block;
width:160px;
height:50px;
background: #dde1e7;
box-shadow: -3px -3px 7px #fffdfdcc,3px 3px 5px rgba(94, 104, 121, 0.342);
text-align:center;
font-size:22px;
line-height:50px;
cursor:pointer;
}
#click
{
display:none;
}
.click-me:hover
{
color: #0a5878;
}
.content
{
visibility:hidden;
width: 330px;
height: auto;
background: #dde1e7;
padding: 30px 35px 40px;
box-sizing: border-box;
border-radius: 5px;
}
#temp
{
position:absolute;
right:10px;
top:20px;
font-size:25px;
background: #dde1e7;
padding: 3px;
padding-left: 11px;
padding-right: 11px;
border-radius: 50%;
cursor:pointer;
}
#click:checked~.content
{
opacity:1;
visibility:visible;
}
.text
{
font-size: 30px;
color: #000000;
font-weight: 600;
text-align: center;
letter-spacing: 2px;
}
form
{
margin-top: 40px;
}
label
{
display: block;
margin-top: 30px;
font-size: 16px;
font-weight: 500;
}
input
{
display: block;
height: 43px;
width: 100%;
background-color: rgba(255,255,255,0.07);
border-radius: 3px;
border: none;
margin-top: 8px;
font-size: 14px;
font-weight: 300;
}
::placeholder
{
color: #4b4e4d;
padding-left: 10px;
}
button
{
width: 100%;
margin-top: 35px;
padding: 12px;
background: #dde1e7;
border: none;
font-size: 17px;
font-weight: 600;
margin-bottom: 32px;
}
<div class="center">
<input type="checkbox" id="click">
<label for="click" class="click-me">Passport</label>
<div class="content">
<label for="click" id="temp">x</label>
<form>
<select style="display: none" id="select">
<option value="150">150 days</option>
</select>
<select style="display: none" id="select2">
<option value="50">150 days</option>
</select>
<label for="date1">Date Issued:</label>
<input type="date" onchange="setSecondDate();" id="date1">
<label for="date2">Expiry Date:</label>
<input type="date" onchange="setThirdDate();" id="date2">
<label for="date3">Recommended Application Date:</label>
<input type="date" id="date3">
</form>
</div>
</div>
Any help would be appreciated
I think additional to the typo the onChange event only fires when a user interacts with the component - not when you programmatically set it. To get that setThirdDate there are some options but the clearest way is to just do the work you would have wanted done on the second event at the same time.
A refactor of this that fixes the typo and sets both dates is:
to change:
<input type="date" onchange="setSecondDate();" id="date1">
to
<input type="date" onchange="handleDateIssuedChanged();" id="date1">
and add (this also renames the setters to be clearer):
function handleDateIssuedChanged() {
setExpiryDate();
setRecommendedDate();
}
Full modified code:
<html>
<head>
<style>
body
{
font-family:sans-serif;
background: #dde1e7;
min-height: 100vh;
}
.center,.content
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.click-me
{
display:block;
width:160px;
height:50px;
background: #dde1e7;
box-shadow: -3px -3px 7px #fffdfdcc,3px 3px 5px rgba(94, 104, 121, 0.342);
text-align:center;
font-size:22px;
line-height:50px;
cursor:pointer;
}
#click
{
display:none;
}
.click-me:hover
{
color: #0a5878;
}
.content
{
visibility:hidden;
width: 330px;
height: auto;
background: #dde1e7;
padding: 30px 35px 40px;
box-sizing: border-box;
border-radius: 5px;
}
#temp
{
position:absolute;
right:10px;
top:20px;
font-size:25px;
background: #dde1e7;
padding: 3px;
padding-left: 11px;
padding-right: 11px;
border-radius: 50%;
cursor:pointer;
}
#click:checked~.content
{
opacity:1;
visibility:visible;
}
.text
{
font-size: 30px;
color: #000000;
font-weight: 600;
text-align: center;
letter-spacing: 2px;
}
form
{
margin-top: 40px;
}
label
{
display: block;
margin-top: 30px;
font-size: 16px;
font-weight: 500;
}
input
{
display: block;
height: 43px;
width: 100%;
background-color: rgba(255,255,255,0.07);
border-radius: 3px;
border: none;
margin-top: 8px;
font-size: 14px;
font-weight: 300;
}
::placeholder
{
color: #4b4e4d;
padding-left: 10px;
}
button
{
width: 100%;
margin-top: 35px;
padding: 12px;
background: #dde1e7;
border: none;
font-size: 17px;
font-weight: 600;
margin-bottom: 32px;
}
</style>
<script>
function setExpiryDate() {
var days = document.getElementById("select").value;
var date = new Date(document.getElementById("date1").value);
date.setDate(date.getDate() + parseInt(days));
document.getElementById("date2").valueAsDate = date;
}
function setRecommendedDate() {
var days3 = document.getElementById("select2").value;
var date2 = new Date(document.getElementById("date2").value);
date2.setDate(date2.getDate() - parseInt(days3));
document.getElementById("date3").valueAsDate = date2;
console.log(date2);
}
function handleDateIssuedChanged() {
setExpiryDate();
setRecommendedDate();
}
</script>
</head>
<body>
<div class="center">
<input type="checkbox" id="click">
<label for="click" class="click-me">Passport</label>
<div class="content">
<label for="click" id="temp">x</label>
<form>
<select style="display: none" id="select">
<option value="150">150 days</option>
</select>
<select style="display: none" id="select2">
<option value="50">150 days</option>
</select>
<label for="date1">Date Issued:</label>
Expiry Date:
Recommended Application Date:
(The other and likely not-what-you-want pattern is to trigger the second event https://stackoverflow.com/a/8789494/7632432 )
Related
I have an input and select element with a label on top of it wrapped in a div "container1".
When I disable all the elements of container1, the label on top of the select-element moves to the back. Like the disabled label on the input-element, I want the label to stay on top. Since this happens only in Chrome, I tried different webkits, but nothing seemed to work.
Does anybody know a solution for this isue?
Below the code, you see a printscreen from Chrome with the problem.
You can find the code also on https://jsfiddle.net/JanRo/q4szervh/16/
HTML:
<form>
<div id="container1">
<div>
<div>
<label class="question" for="name">Input</label>
</div>
<div>
<input type="text" id="name" name="name">
</div>
</div>
<div>
<div>
<label class="question" for="classnow">Select</label>
</div>
<div>
<select id="classnow" name="classnow">
<option value="" selected></option>
</select>
</div>
</div>
<div>
<button onclick="disable()" type="button">Next</button>
</div>
</div>
</form>
CSS:
* {
box-sizing: border-box;
margin-bottom: 0;
padding: 0;
}
html {
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
padding: 5px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: small;
}
#container1 > div {
margin-top: 15px;
}
.question {
top: 5px;
position: relative;
background-color: red;
margin-left: 10px;
padding: 6px 6px 6px 6px;
font-size: small;
font-weight: bold;
}
input[type=text], select {
width: 100%;
height: 35px;
border: solid 1px black;
border-radius: 10px;
padding: 3px 3px 3px 10px;
font-size: small;
background-color: white;
}
input[type=text]:disabled, select:disabled {
outline: none !important;
width: 100%;
height: 35px;
border: solid 1px black;
border-radius: 10px;
padding: 3px 3px 3px 10px;
font-size: small;
}
JS
function disable() {
var nodes = document.getElementById("container1").getElementsByTagName('*');
for (var i = 0; i < nodes.length; i++) {
nodes[i].disabled = true;
}
}
<label class="question" for="classnow" style="z-index: 999;">Select</label>
and
<div style="z-index: 1;">
<select id="classnow" name="classnow">
<option value="" selected></option>
</select>
</div>
Try this it Worked for Me and If it Works Dont Forgot to UpVote
You can add a z-index css property to the div surrounding your labels. you should add a class name to your divs for better control. example below:
div.yourClassName {
z-index: 5; /* you can set whatever number higher than 0 */
position: relative;
}
I am working on a chatbot at the moment and trying to connect a GUI I have been working with to the project.
It is running smooth but my output is a little messed up; in particular, the chat boxes should alternate between the user and the BOT, but they are stacking on top and not formatting correctly.
I want to fix this issue, but keep the screen dividing in half down the middle so that the bot outputs are on the right and the users on the left. I just need to get them to alternate back and forth.
I've tried anchoring the newest box with a margin-top, tried setting a counter variable to update the placement of each new box, etc., but am having trouble spacing them relative to each other.
Below is the code without the backend work. So, this won't run perfect but it should get the setup I have across...
Here is the CSS code:
body {
font-family: Cambria;
color: rgb(122, 4, 4);
background-color: rgb(136, 175, 175);
}
h1 {
color: black;
margin-bottom: 0;
margin-top: 0;
text-align: center;
font-size: 40px;
}
h2 {
color: black;
font-size: 20px;
margin-top: 3px;
text-align: center;
}
#user_chatbox {
margin-left: 0;
margin-right: auto;
width: 50%;
margin-top: 30%;
}
#bot_chatbox {
margin-left: 50%;
margin-right: auto;
width: 50%;
margin-top: 10%;
/* height: 80%; */
/* background-color: pink; */
/* border-radius: 10px; */
}
#userInput {
margin-left: auto;
margin-right: auto;
width: 95%;
margin-top: 150px;
}
#textInput {
width: 92%;
border: 3px solid Black;
border-bottom: 3px solid #660096;
font-family: Cambria;
font-size: 16px;
}
#buttonInput {
padding: 10px;
font-family: Cambria;
font-size: 72;
}
.userText {
color: rgb(0, 0, 0);
font-family: Georgia;
font-size: 16px;
text-align: left;
line-height: 20px;
}
.userText span {
display:block;
width:auto;
background-color: rgb(87, 201, 152);
padding: 10px;
border-radius: 10px;
/* counter-increment: var(--chatbox_spacing); */
}
.botText {
color: Black;
font-family: Consolas, monaco, monospace;
font-size: 16px;
text-align: left;
/* line-height: calc(29 + var(--chatbox_spacing))px; */
line-height: 20px;
}
.botText span {
display:block;
width:auto;
background-color: rgb(73,196,199);
padding: 10px;
border-radius: 10px;
/* counter-increment: var(--chatbox_spacing); */
}
... and here are the .html with .js code (within index.html) that is updating the blocks to be printed out with new information (input from the user and a reply from the bot):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/static/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<h1>Analysis Chatbot</h1>
<!-- The main chat environment for interacting with the bot. -->
<div>
<!-- The text of the bot. -->
<div id="bot_chatbox">
<p class="botText"><span>Welcome! How can I help you analyze your dataset?</span></p>
</div>
<div id="user_chatbox"></div>
<!-- The input text of the user interacting with the bot. -->
<div id="userInput">
<input id="textInput" type="text" name="msg" placeholder="Message">
<input id="buttonInput" type="submit" value="Send">
</div>
<script>
function getBotResponse() {
var rawText = $("#textInput").val();
var userHtml = '<p class="userText"><span>' + rawText + '</span></p>';
$("#textInput").val("");
$("#user_chatbox").append(userHtml);
document.getElementById('userInput').scrollIntoView({block: 'start', behavior: 'smooth'});
$.get("/get", { msg: rawText }).done(function(data) {
var botHtml = '<p class="botText"><span>' + data + '</span></p>';
$("#bot_chatbox").append(botHtml);
document.getElementById('userInput').scrollIntoView({block: 'start', behavior: 'smooth'});
});
}
$("#textInput").keypress(function(e) {
if(e.which == 13) {
getBotResponse();
}
});
$("#buttonInput").click(function() {
getBotResponse();
})
</script>
</div>
</body>
</html>
Nothing breaks, but I have attached some images below of the current output. Again, it isn't as much that the replies are basic right now, but rather that I want the displayed text blobs to be alternating from the bot (right side) to the user (left side) while keeping the screen split in the middle.
I want that image to be: the top blue on the right (Welcome...) then the first green on the left (can you find me sales in...) then next blue on right and so on so forth...
I put together a basic example of what you're trying to do using a 100% width wrapper that holds the message inside. The wrapper has display:flex; so that the <div>s inside don't expand. Check it out:
$(document).ready(function() {
$('#sendUser').click(function(){
if($('#userText').val()!=""){
$('#chatbox').append('<div class="message user"><div>'+$('#userText').val()+'</div></div>');
$('#userText').val('');
}
});
$('#sendBot').click(function(){
if($('#userText').val()!=""){
$('#chatbox').append('<div class="message bot"><div>'+$('#userText').val()+'</div></div>');
$('#userText').val('');
}
});
});
#chatbox{
width: 300px;
height: 400px;
border: 1px solid black;
margin: auto;
margin-top: 20px;
overflow-y: scroll;
}
#inputs{
display: grid;
padding: 10px 0;
width: 300px;
margin: auto;
grid-template-columns: auto 40px 40px;
grid-gap: 4px;
}
.button{
text-align: center;
border: 1px solid #a0a0a0;
cursor: pointer;
}
.button:hover{
background-color: grey;
color: white;
}
.message{
display: flex;
}
.message.user{
text-align: left;
}
.message > div{
margin: 10px 10px 0;
padding: 6px 8px;
border-radius: 15px;
color: white;
}
.message.bot > div{
margin-left: auto;
background-color: teal;
}
.message.user > div{
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chatbox">
<div class="message bot">
<div>
hello
</div>
</div>
<div class="message user">
<div>
hello!
</div>
</div>
</div>
<div id="inputs">
<input type="text" id="userText">
<div class="button" id="sendBot">Bot</div>
<div class="button" id="sendUser">User</div>
</div>
Here's the CodePen if you wanted to mess with it.
I am editing an existing html file. I have to add a numeric entry field allowing users to indicate the number of volunteers they want to enter information for, and upon pressing enter in said field, generate additional input fields in the form below. Then when the form is submitted, the text on the bottom will replace the placeholders with the text entered in the form and repeated for as many volunteers were indicated in the first field.
I am new to javascript so there's still a lot of things I don't really understand but I am trying to learn. I have attempted referencing similar isolated examples of each action I need to perform but none of it really comes together or works properly for me. I understand that I should be using loop and array functions but can't really piece together how it all connects.
I have the code for the number field as well as the javascript for the text that will get replaced so far notated below:
function changeText() {
var recipient = document.getElementById('recipient').value;
document.getElementById('recipientName').innerHTML = recipient;
var organization = document.getElementById('organization').value;
document.getElementById('organizationName').innerHTML = organization;
var date = document.getElementById('date').value;
document.getElementById('eventDate').innerHTML = date;
var url = document.getElementById('url').value;
document.getElementById('websiteURL').innerHTML = url;
var host = document.getElementById('host').value;
document.getElementById('hostName').innerHTML = host;
return false;
}
body {
font: 15px arial, sans-serif;
color: #808080;
}
input[type=text],
select,
input[type=password],
radio {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
background-color: #800D1E;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #802F1E;
}
section {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
article {
border-radius: 5px;
background-color: #CCCCCC;
padding: 20px;
color: #222222;
}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.topnav li {
float: left;
}
ul.topnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {
background-color: #111;
}
ul.topnav li a.active {
background-color: #CCCCCC;
color: #333
}
ul.topnav li.right {
float: right;
}
#media screen and (max-width: 600px) {
ul.topnav li.right,
ul.topnav li {
float: none;
}
}
.top {
position: relative;
background-color: #ffffff;
height: 68px;
padding-top: 20px;
line-height: 50px;
overflow: hidden;
z-index: 2;
}
.logo {
font-family: arial;
text-decoration: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 37px;
letter-spacing: 3px;
color: #555555;
display: block;
position: absolute;
top: 17px;
}
.logo .dotcom {
color: #800D1E
}
.topnav {
position: relative;
z-index: 2;
font-size: 17px;
background-color: #5f5f5f;
color: #f1f1f1;
width: 100%;
padding: 0;
letter-spacing: 1px;
}
.top .logo {
position: relative;
top: 0;
width: 100%;
text-align: left;
margin: auto
}
footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Invitation Page</title>
</head>
<body>
<header>
<div class="top">
<a class="logo" href="index.html">Volunteers<span class="dotcom">.org</span></a>
</div>
<nav>
<ul class="topnav">
<li>Home
</li>
<li>Invitation
</li>
<li>Gallery
</li>
<li>Registration
</li>
</ul>
</nav>
</header>
<br/>
<label for="volunteeramount">Number of Volunteers:</label>
<input type="number" name="volunteeramount" id="volunteers" placeholder="#" min="1" max="10">
<section id="pageForm">
<form action="#" onsubmit="return false;">
<br/>
<label for="recipientName">Recipient Name:</label>
<input type="text" name="recipientName" id="recipient" placeholder="Enter your Recipient Name" />
<label for="organizationName">Organization Name:
</label>
<input type="text" name="organizationName" id="organization" placeholder="Enter your Organization Name" />
<label for="eventDate">Event Date:
</label>
<input type="text" name="eventDate" id="date" placeholder="Enter your Event Date" />
<label for="websiteURL">URL:
</label>
<input type="text" name="websiteURL" id="url" placeholder="Enter your Website URL" />
<label for="hostName">Host Name:
</label>
<input type="text" name="hostName" id="host" placeholder="Host Name" />
<input type="submit" value="Submit" onclick="changeText()">
</form>
</section>
<article id="placeholderContent">
Hello <span id="recipientName">recipientName</span>!
<br/>
<br/> You have been invited to volunteer for an event held by <span id="organizationName">organizationName</span> on <span id="eventDate">eventDate</span>. Please come to the following website: <span id="websiteURL">websiteURL</span> to sign up as
a volunteer.
<br/>
<br/> Thanks!
<br/>
<br/>
<span id="hostName">hostName</span>
</article>
</body>
</html>
Any help would be appreciated in advance. I'm not sure if I should include any other information but please let me know if I do, I will try to provide what I can. Thank you.
In my below jQuery I have an element that reflects the written input within a secondary element. At the same time the element with the reflected text needs to resize, this is working, but there are 2 problems I cannot resolve:
1. When holding a backspace down, it doesn't keep up.
2. When you press single backspace, it skips a character and field cannot be emptied.
Please see below snippet:
jQuery(document).ready( function() {
jQuery(function(){
jQuery('#vanity-span').text(jQuery('#reflection').val());
jQuery('#reflection').width(jQuery('span').width());
}).on('input', function () {
jQuery('#vanity-span').text(jQuery('#reflection').val());
jQuery('#reflection').width(jQuery('span').width());
});
jQuery('#vanity-url').bind('keypress keyup blur', function() {
jQuery('#reflection').val(jQuery(this).val());
});
});
body {
background-color: #e4e4e4;
font-family: Arial;
}
#vanity-url-wrapper {
margin-top: 3em;
text-align: center;
}
#vanity-url-wrapper > span {
background-color: #FBE3CF;
border-radius: 8px;
padding: 0.5em 0;
border: 2px solid orange;
}
.pre-span {
background-color: orange;
color: white;
font-weight: bold;
padding: 0.5em;
}
#vanity-url {
display: block;
text-align: center;
width: 12em;
margin: 3em auto;
font-size: 1.2em;
border-radius: 5px;
border: 2px solid orange;
padding: 0.5em;
}
#vanity-span{
padding: 0.5em;
}
#reflection {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<div id="vanity-url-wrapper">
<span>
<span class="pre-span">https://example.com/</span>
<span id="vanity-span"></span>
<input id="reflection" type="text" readonly>
<span class="pre-span">/</span>
</span>
</div>
<input id="vanity-url" type="text" placeholder="Type here your vanity URL">
</body>
The problem is that the .bind('keypress keyup blur', function() { is not cooping well with updating the values. When the key is down it needs an update and is waiting for up, it then skips, and vice versa.
So the solution here is to use .on('input', function() { instead.
See below outcome:
jQuery(document).ready( function() {
jQuery(function(){
jQuery('#vanity-span').text(jQuery('#reflection').val());
jQuery('#reflection').width(jQuery('span').width());
}).on('input', function () {
jQuery('#vanity-span').text(jQuery('#reflection').val());
jQuery('#reflection').width(jQuery('span').width());
});
jQuery('#vanity-url').on('input', function() {
jQuery('#reflection').val(jQuery(this).val());
});
});
body {
background-color: #e4e4e4;
font-family: Arial;
}
#vanity-url-wrapper {
margin-top: 3em;
text-align: center;
}
#vanity-url-wrapper > span {
background-color: #FBE3CF;
border-radius: 8px;
padding: 0.5em 0;
border: 2px solid orange;
}
.pre-span {
background-color: orange;
color: white;
font-weight: bold;
padding: 0.5em;
}
#vanity-url {
display: block;
text-align: center;
width: 12em;
margin: 3em auto;
font-size: 1.2em;
border-radius: 5px;
border: 2px solid orange;
padding: 0.5em;
}
#vanity-span{
padding: 0.5em;
}
#reflection {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<div id="vanity-url-wrapper">
<span>
<span class="pre-span">https://example.com/</span>
<span id="vanity-span"></span>
<input id="reflection" type="text" readonly>
<span class="pre-span">/</span>
</span>
</div>
<input id="vanity-url" type="text" placeholder="Type here your vanity URL">
</body>
I have recently been making a website that connects two words to make a simple domain for people.
I was wondering how i could put an ID where the bold is so that i can put the variable "materials" in also. I want these to be changeable so that it is possible for people to pick from two drop down menu's that I've put in the HTML. This may sound like a strange request but this is because i am pretty new to JavaScript and i know very little. Thank you for your time. :-)
MY JAVASCRIPT:
var places = ["island","moon","mars","vacation","house","yard","hole","library","cave","sun","sandpit","swing","park","ground","sky","land"];
var object = ["ball","toaster","wheel","bike","chair","cup","pole","zip","cake","cheese","microphone","stapler","macaroni","bucket","vacuum","vest","antelope","zucchini","knee","nail","nose","toe","paper","envelope","wood","yogurt"];
var material = ["stone","velvet","silk","cotton","carpet","denim","nylon","leather"];
function randomName() {
var name = places[Math.floor( Math.random()*places.length )] + object[Math.floor( Math.random()*object.length )] + ".com";
document.getElementById("output").innerHTML = name;
}
MY HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<h1 id="header">Randoma.in</h1>
<div id="span">
<select id="dropdown1">
<option value="places">Places</option>
<option value="objects">Objects</option>
</select>
<select id="dropdown2">
<option value="places">Places</option>
<option value="objects">Objects</option>
</select>
</div>
<button onclick="randomName()" id="button">Generate Domain</button>
<div id="output"></div>
<div class="footer"></div>
</body>
</html>
AND WHY NOT; MY CSS:
body{
background-color: #105B63;
}
#header {
text-align: center;
color: #f1f1f1;
}
#output {
background-color:#ffffff;
border: 2px solid #333;
border-radius:4px;
text-align: center;
height: 60px;
width: 300px;
margin-top: 90px;
margin-left: auto;
margin-right: auto;
padding-top: 30px;
font-size: 24px;
color: #333;
}
#button {
font-size: 24px;
display:block;
margin-left: auto;
margin-right: auto;
padding: 10px 15px;
background: #FFD34E;
color: #333;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: solid 2px #333;
}
#button:hover {
background: #F2C84A;
border: solid 2px #333;
text-decoration: none;
}
#span {
margin-left: auto;
margin-right: auto;
width: 500px;
}
#dropdown1{
position: absolute;
left: 25%;
}
#dropdown2{
position: absolute;
right 25%;
}
.footer {
position:absolute;
bottom:0px;
width: 100%;
margin: 0;
background-color: #FFFAD5;
height: 200px;
You could try:
document.getElementById("elementname").value = variableName
In your JavaScript code.