I am still learning javascript, jquery and all that comes with it. As a personal test for learning I am developing a program that eventually will pull from a php server. Right now I am pulling from a hard coded json file and preloading a page with that. The user will then be able to click the edit button that is populated and it will provide a popup with a preloaded form with that sections data (this is currently the part i need assistance with). Using jquery 1.9.1 with migrate and mustache.js and jqmodal to handle the form popup Here is my code:
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<link href='css.css' rel='stylesheet' type='text/css'>
<script id="playerTpl" type="text/template">
{{#playerList}}
<li id="player{{player}}">
<h3>player: {{player}}</h3>
<p><strong>Name:</strong> {{name}}</p>
<p><strong>Score:</strong> {{score}}</p>
<p><strong>Rank: </strong>{{rank}}</p>
Edit
Delete
</li>
{{/playerList}}
</script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqModal/r14/jqModal.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script>
<body>
<div id="mainContent">
<h1>Prototype Example:</h1>
<ul id="playersUL">
</ul>
Add Player
<div class="clear"></div>
<div class="addplayerStyle" id="addPlayer">
<form id="myForm">
<label>Player Number</label>
<select id="optionList" name="player" required>
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
<option value="1">4</option>
</select><br><br>
<label>Player Name</label>
<input type="text" name="name" placeholder="Player Name" required /><br><br>
<label>Player Score</label>
<input type="number" name="score" placeholder="Player Score" required /><br><br>
<label>Player Rank</label>
<input type="number" name="rank" placeholder="Player Rank" required /><br><br>
<input type="reset" value="Cancel" class="jqmClose" /><input type="submit" value="Submit" />
<div class="clear"></div>
</form>
</div>
<script src="script.js"></script>
</div>
</body>
Json file:
{
"playerList" : [
{
"player":1,
"name":"Barot Bellingham",
"score":10000,
"rank":5
},
{
"player":2,
"name":"Jonathan G. Ferrar II",
"score":50,
"rank":1
},
{
"player":3,
"name":"Hillary Hewitt Goldwynn-Post",
"score":100000,
"rank":100
}
]}
And lastly the javascript so far:
$(document).ready(function() {
$.getJSON('data.json', function(data){
var template = $('#playerTpl').html();
var html = Mustache.to_html(template, data);
$('#playersUL').html(html);
/*for (var i = 0, i <= data.playerList.length, i++) {
for (key in data.playerList[i].player){
alert(data.playerList[i].player;
}
};*/
$('#playersUL').on("click", 'a[name=modal]', function(e) {
e.preventDefault();
console.log('1');
/*$.each(data.playerList, function(key, val) {
console.log(val.player);
playerArray.push(val);*/
});//populatePlayerNum();
$('#addPlayer').jqmShow({
});
});
}); //getJSON
$('#addPlayer').jqm({
trigger: '#addBTN'
});
});
and lastly so you can get the popup working correctly and formatting the way i have it the css:
.clear {
clear: both;
}
h1 {
margin: 0;
padding: 0;
}
#mainContent {
width: 50%;
margin: 0 auto;
padding: 30px;
background: #0CF;
box-shadow: #666 0 5px 10px;
}
#mainContent h1 {
margin-bottom: 20px;
}
ul {
float: left;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
float: left;
width: auto;
margin-right: 25px;
padding: 15px;
border: 1px solid #666;
background: #ccc;
box-shadow: #666 2px 5px 5px;
}
a {
float: left;
margin: 5px;
padding: 5px 10px 5px 10px;
text-align: center;
color: #fff;
text-decoration: none;
background: #666;
border: 1px solid #000;
}
#addBTN {
}
a:hover {
background: #009;
}
form {
margin-top: 15px;
}
#addPlayer {
}
label {
width: 100px;
}
input[type='reset'], input[type='submit'] {
display: block;
float: left;
margin-right: 5px;
padding: 5px 10px 5px 10px;
text-align: center;
color: #fff;
text-decoration: none;
background: #666;
border: 1px solid #000;
cursor: pointer;
}
input[type='reset']:hover, input[type='submit']:hover {
background: #009;
}
.addplayerStyle {
display: none;
position: absolute;
top: 50px;
left: 600px;
z-index: 2;
width: 300px;
padding: 20px;
background: #ccc;
border: 1px solid #000;
}
.jqmOverlay {
background-color: #000;
}
I hope it is clear on what I am looking for right now. I am not looking to post to a database yet or anything just to add the data to the form. I appreciate your help and thanks ahead of time.
Related
$(document).ready(function() {
$('#btn').click(function() {
var mylist = $('#input').val();
$('#myUL').prepend('<li><input type="checkbox" id = "check" name="interest" onclick="toggleBoxVisibility()">' + mylist + '</li>');
});
});
function toggleBoxVisibility() {
if (document.getElementById("check").checked == true) {
document.getElementsByTagName("LI").style.visibility = "visible";
} else {
document.getElementById("myUL").style.visibility = "hidden";
}
}
#container {
text-align: center;
margin: auto;
width: 400px;
border: 1px solid #ccc;
}
ul li {
cursor: pointer;
position: relative;
padding: 12px 8px 12px 40px;
background: #eee;
font-size: 18px;
transition: 0.2s;
/* make the list items unselectable
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; */
}
ul li.checked {
background: #888;
color: #fff;
text-decoration: line-through;
}
ul li.checked::before {
content: '';
position: absolute;
border-color: #fff;
border-style: solid;
border-width: 0 2px 2px 0;
top: 10px;
left: 16px;
transform: rotate(45deg);
height: 15px;
width: 7px;
}
.addBtn {
padding: 10px;
width: 25%;
background: #d9d9d9;
color: #555;
float: left;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
border-radius: 0;
}
input {
margin: 0;
border: none;
border-radius: 0;
width: 75%;
padding: 10px;
float: left;
font-size: 16px;
}
.header:after {
content: "";
display: table;
clear: both;
}
#myUL {
width: 50%;
margin-left: auto;
margin-right: 27%;
}
.claim {
position: absolute;
right: 0;
top: 0;
}
#check {
margin-right: -190px;
margin-left: -190px;
margin-top: 9px;
}
<html>
<head>
<title>Login </title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<body>
<div class="hero">
<div class="container">
<h1 class="display-2 text-center">To-Do</h1>
<div class="row">
<form id="form" class="col-lg-6 col-8 mx-auto">
<div class="input-group">
<input id="input" class="form-control" placeholder="Enter a new task here">
<span>
<button id="btn" type="button" class="btn btn-primary" >Add</button>
</span>
</div>
</div>
<ul id="myUL">
<li>Hit the gym </li>
<li class="checked">Pay bills</li>
<li>Meet George</li>
<li>Buy eggs</li>
</ul>
<div class="row">
<button id="btnClr" type="button" class="btn btn-primary mx-auto btnHide"> Remove Complete </button>
</div>
</form>
</div>
</div>
</body>
</html>
**I want to run a line through the text once it is selected and I am not sure how to do that. I have pasted most of my code above and I tried to toggle the visiblity of the list in order to make sure if the checking function works or not. The checking function works. I just want some ideas of how should i strike through the text once the checkbox next to the box is selected. **
you can refer this article to done this task here. Anyway I try to use it and it works fine. Hope this one can give you some insight.
Add label on your jQuery code, <label>' + mylist + '</label> and looks something like this:
$(document).ready(function() {
$('#btn').click(function() {
var mylist = $('#input').val();
$('#myUL').prepend('<li><input type="checkbox" id = "check" name="interest" onclick="toggleBoxVisibility()"><label>' + mylist + '</label></li>');
});
});
And add this line to your CSS:
input:checked+label {
text-decoration: line-through;
text-decoration-color: #fff;
}
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>
With JQM, I am trying to achieve the following header design
|[Home] Company------------------------------[Search][Filter]
[list of items]
Home button and company tille left aligned and the Search and Filter right aligned.
When the user clicks on the search icon, I want the following search bar to appear between the header and the list of items
<div data-role="fieldcontain">
<label for="search">Search Input:</label>
<input id="search-tickets" type="search" name="search-mini" id="search-mini" data-mini="true" />
</div>
JQM docs guided me to collapsible headers. While this is good, its incredibly hard to accommodate other icons like the home, company text and filter in the same header if it is marked collapsible.
Is there any alternative to collapsible headers that I can use and still maintain status quo on the header?
The trickiest part is the header button/text alignment (please test my solution in all browsers). For the search bar I would just hide/show the main element on search button click.
Code -:
$(document).on("click", "#search-button", function(event)
{
$("#searchtickets").toggle();
});
.company
{
display: table-cell;
padding-left: 3em;
}
.spacerright
{
margin-right: 50px !important;
}
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div data-role="page">
<div data-role="header">
<h1 class="company">Company</h1>
<a class="ui-btn-left" data-iconpos="notext" href="#panel" data-role="button" data-icon="home"></a>
<a class="ui-btn-right spacerright" href="#page-new-ticket" id="search-button" data-role="button" data-icon="search" data-iconpos="notext" data-inline="true"></a>
<a class="ui-btn-right" href="#page-new-ticket" id="btn-new-ticket" data-role="button" data-icon="plus" data-iconpos="notext" data-inline="true"></a>
</div>
<div data-role="content">
<div data-role="fieldcontain" id="searchtickets" style="display:none;padding-bottom:1em;">
<label for="search">Search Input:</label>
<input id="search-tickets" type="search" name="search-mini" id="search-mini" data-mini="true" />
</div>
<ul data-role="listview">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
</div>
I think u need not any JS or css library for this, u can do it with only some lines of pure CSS code ( like this tutorial ) -
body {
background: #fff;
color: #666;
font: 85%/140% Arial, Helvetica, sans-serif;
width: 800px;
max-width: 96%;
margin: 0 auto;
}
a {
color: #69C;
text-decoration: none;
}
a:hover {
color: #F60;
}
h1 {
font: 1.7em;
line-height: 110%;
color: #000;
}
p {
margin: 0 0 20px;
}
/* reset webkit search input browser style */
input {
outline: none;
}
input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none; /* remove the search and cancel icon */
}
/* search input field */
input[type=search] {
background: #ededed url(http://webdesignerwall.com/demo/expandable-search-form/images/search-icon.png) no-repeat 9px center;
border: solid 1px #ccc;
padding: 9px 10px 9px 32px;
width: 55px;
-webkit-border-radius: 10em;
-moz-border-radius: 10em;
border-radius: 10em;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
input[type=search]:focus {
width: 130px;
background-color: #fff;
border-color: #6dcff6;
-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
box-shadow: 0 0 5px rgba(109,207,246,.5);
}
/* placeholder */
input:-moz-placeholder {
color: #999;
}
input::-webkit-input-placeholder {
color: #999;
}
/* demo B */
#demo-b input[type=search] {
width: 15px;
padding-left: 10px;
color: transparent;
cursor: pointer;
}
#demo-b input[type=search]:hover {
background-color: #fff;
}
#demo-b input[type=search]:focus {
width: 130px;
padding-left: 32px;
color: #000;
background-color: #fff;
cursor: auto;
}
#demo-b input:-moz-placeholder {
color: transparent;
}
#demo-b input::-webkit-input-placeholder {
color: transparent;
}
<h3>Try this</h3><br/>
<form>
<input type="search" placeholder="Search">
</form>
<h3>Or this</h3>
<form id="demo-b">
<input type="search" placeholder="Search">
</form>
And u can also do this by this way of using a small JS-
$(function() {
$('.srch-button').click(function(){
var $wrapper = $('.srch-wrapper'),
isOpen = $wrapper.hasClass('open');
$wrapper.toggleClass('open')
.find('.srch-input')[isOpen ? 'blur' : 'focus']();
// remove this - onyl for demo
return false;
});
})
body {
padding: 10px 20px;
background-color: #343434;
color: #fff;
}
.center {
padding: 60px;
max-width: 400px;
margin-left: 200px;
}
.srch-form {
position: relative;
width: 44px;
}
.srch-wrapper {
position: absolute;
top: 0;
right: 0;
width: 44px;
height: 40px;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.srch-wrapper.open {
width: 200px;
}
.srch-input {
position: relative;
background-color: transparent;
height: 44px;
line-height: 26px;
padding: 5px 10px 5px 32px;
box-sizing: border-box;
border: 2px solid #ddd;
border-radius: 100px;
margin: 0;
width: 100%;
}
.srch-input:focus {
outline: none;
border-color: #aaa;
}
.srch-button {
position: absolute;
top: 0;
left: 0;
border: 0;
padding: 0;
margin: 0;
background-color: transparent;
color: #ddd;
width: 44px;
height: 44px;
text-align: center;
}
.srch-button:focus {
outline: none;
}
.srch-input:focus + .srch-button,
.srch-button:hover {
color: #aaa;
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/zepto/1.0/zepto.min.js"></script>
<div class="center">
<form action="" class="srch-form">
<div class="srch-wrapper open">
<input type="text" class="srch-input" placeholder="Search..." />
<button class="srch-button" type="submit">
<em class="icon-search"></em>
</button>
</div>
</form>
</div>
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.