Hi I am trying to have 20 customize audio players though I could only make the first one work. As soon as I copy and paste the new audio in html it does not start playing. I am not sure if the only way is by giving a unique id to each audio or if there is a way to avoid doing that by changing the javascript code.
thanks!!!
it is also online here http://musictext.yt/audio/audio.html
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<title>Reproductor de Video</title>
<link rel="stylesheet" href="reproductor.css">
<script src="reproductor.js"></script>
</head>
<body>
<section id="reproductor">
<audio id="medio" width="400" height="400">
<source src="rout.mp3">
</audio>
<nav>
<div id="botones">
<button class="button" id="reproducir" >play</button>
</div>
<div id="barra">
<div id="progreso">
</div>
</div>
<div style="clear: both"></div>
</nav>
</section>
</body>
</html>
JS
function iniciar() {
maximo=80;
medio=document.getElementById('medio');
reproducir=document.getElementById('reproducir');
barra=document.getElementById('barra');
progreso=document.getElementById('progreso');
reproducir.addEventListener('click', presionar, false);
barra.addEventListener('click', mover, false);
}
function presionar(){
if(!medio.paused && !medio.ended) {
medio.pause();
reproducir.innerHTML='play';
window.clearInterval(bucle);
}else{
medio.play();
reproducir.innerHTML='pause';
bucle=setInterval(estado, 1000);
}
}
function estado(){
if(!medio.ended){
var total=parseInt(medio.currentTime*maximo/medio.duration);
progreso.style.width=total+'px';
}else{
progreso.style.width='0px';
reproducir.innerHTML='play';
window.clearInterval(bucle);
}
}
function mover(e){
if(!medio.paused && !medio.ended){
var ratonX=e.pageX-barra.offsetLeft;
var nuevoTiempo=ratonX*medio.duration/maximo;
medio.currentTime=nuevoTiempo;
progreso.style.width=ratonX+'px';
}
}
window.addEventListener('load', iniciar, false);
CSS
body{
text-align: center;
}
header, section, footer, aside, nav, article, figure, figcaption, hgroup{
display : block;
}
#reproductor{
width: 100px;
height: 100px;
margin: 60px auto;
padding: 5px;
background: blue;
border: 1px solid #666666;
}
nav{
margin: 1px 0px;
}
.button {
font-family: arial;
background-color: black;
border: none;
color: white;
padding: ;
text-align: center;
font-size: 12px;
margin: 4px 2px;
opacity: 0.6;
transition: 0.3s;
display: inline-block;
text-decoration: none;
cursor: pointer;
}
.button:hover {opacity: 1}
#botones{
background-color: black;
width: 100px;
height: 20px;
}
#barra{
position: relative;
width: 88px;
height: 66px;
padding: 4px;
border: 1px solid black;
background: white;
}
#progreso{
position: absolute;
width: 0px;
height: 60px;
background: black;
}
Related
how can i correctly implement html and css to wordpress site? inserting into html section caused this:
enter image description here
enter image description here
and i want it to look like this: check pic
enter image description here
i dont want other text to be in box shadow
* {
box-sizing: border-box;
}
div.cenovy_box {
width: 100%;
outline: 1px solid #f2f1f1 !important;
box-shadow: 0px 5px 10px #d3d3d3;
float: left;
}
div.fotkavboxe {
display: flex;
float: left;
width: 30%;
margin-left: 50px;
}
h1.nadpis_p {
border-bottom: 2px solid #20d796;
font-family: "poppins";
text-align: center;
padding-bottom: 10px;
}
div.tlacidlo {
clear: both;
width: 30%;
display: flex;
}
.k_predajcovi {
font-family: "poppins";
background-color: #000000;
color: #ffffff;
font-size: 20px;
cursor: pointer;
padding: 10px 20px;
border: solid #000000 2px;
opacity: 1;
transition: 0.3s;
}
.k_predajcovi:hover {
color: #000000;
background-color: #fff;
opacity: 1;
}
p.cena_v_boxe {
width: 30%;
font-size: 25px;
font-family: "poppins";
float: left;
}
img.fotka {
background-color: #000000;
border: 2px #555;
opacity: 1;
transition: 0.3s;
}
img.fotka:hover {
color: #fff;
opacity: 0.5;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
</style>
</head>
<body>
<div class="cenovy_box">
<div class="obsah">
<h1 class="nadpis_p">Brutálna vychytávka</h1>
</div>
<div class="fotkavboxe">
<a href="https://www.banggood.com/Xiaomi-Redmi-Note-10-Pro-Global-Version-6GB-128GB-108MP-Quad-Camera-6_67-inch-120Hz-AMOLED-Display-33W-Fast-Charge-Snapdragon-732G-Octa-Core-4G-Smartphone-p-1828679.html?cur_warehouse=HK&ID=62464446304721&rmmds=search"
target="_blank"><img class="fotka" src="https://imgaz.staticbg.com/thumb/large/oaupload/banggood/images/FE/BE/525e460f-581a-46ee-b737-1fe3d9492492.jpg.webp" alt="redmi note 10" style="width: 200px; height:200px;"></a>
</div>
<div class="cena">
<p class="cena_v_boxe">20€</p>
</div>
<div class="tlacidlo">
<button class="k_predajcovi" onclick="window.location.href = 'https://www.google.sk';">
K predajcovi
</button>
</div>
</div>
</body>
</html>
can you please help mw with inserting this code into articles? i want to adding it into articles just html (css will be in custom css settings) i am unable to code my own plugin, so this how i am making this
How to Upload an HTML File to WordPress
1) Navigate to your Admin Dashboard.
2) Click 'Pages' in the left sidebar.
3) Choose an existing page or create a new one.
4) Click 'Add Block.'
5) Add a 'File' block.
6) Choose your HTML file.
<!DOCTYPE html>
<html lang="en">
<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">
<title>Preview Testing</title>
</head>
<body>
<style>
.buttonDownload {
display: inline-block;
position: relative;
padding: 10px 25px;
background-color: #1d71ff;
color: white;
font-family: sans-serif;
text-decoration: none;
font-size: 0.9em;
text-align: center;
text-indent: 15px;
margin: 2px;
border-radius: 12px;
align-items: center;
}
.down-button{
width: 100%;
text-align: center;
}
.buttonDownload:hover {
background-color: #333;
color: white;
}
.buttonDownload:before, .buttonDownload:after {
content: ' ';
display: block;
position: absolute;
left: 15px;
top: 52%;
}
/* Download box shape */
.buttonDownload:before {
width: 15px;
height: 2px;
border-style: solid;
border-width: 0 2px 2px;
}
/* Download arrow shape */
.buttonDownload:after {
width: 0px;
height: 0px;
margin-left: 3px;
margin-top: -7px;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: transparent;
border-top-color: inherit;
animation: downloadArrow 2s linear infinite;
animation-play-state: paused;
}
.buttonDownload:hover:before {
border-color: #4CC713;
}
.buttonDownload:hover:after {
border-top-color: #4CC713;
animation-play-state: running;
}
.milkparagraph{
color: #FF4500;
font-size: 19px;
margin: 15px;
}
.milkdownbox{
border: 2px solid #365194;
padding: 0px 5% 7px 2%;
border-radius: 12px;
margin: 17px 0% 20px;
width: fit-content;
}
/* keyframes for the download icon anim */
#keyframes downloadArrow {
/* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
0% {
margin-top: -7px;
opacity: 1;
}
0.001% {
margin-top: -15px;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
margin-top: 0;
opacity: 0;
}
}
</style>
<div class="syltp">
<script type="text/javascript">
$(function(){
$('#button').click(function(){
if(!$('#iframe').length) {
$('#iframeHolder').html('<iframe id="iframe" src="https://drive.google.com/file/d/1GEsC2NXwLjvV4N2JCPqAqAxqMEt3uro0/preview" width="700" height="400" style="border: 1px solid black;"></iframe>');
}
});
});
</script>
<h4> <span style="font-family: 'Open Sans';"><i aria-hidden="true" class="fa fa-sticky-note"></i>Preview without jquery</span></h4>
<div class="down-button" id="button"><b class="buttonDownload">PREVIEW</b></div>
<br />
<div id="iframeHolder"></div>
</div>
</body>
</html>
How to open iframe only on when the button is clicked without using jquery <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js' type='text/javascript'></script>
here when we open a website the iframe should not load it should load only when the button is clicked
My present code :
<!DOCTYPE html>
<html lang="en">
<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">
<title>Preview Testing</title>
</head>
<body>
<style>
.buttonDownload {
display: inline-block;
position: relative;
padding: 10px 25px;
background-color: #1d71ff;
color: white;
font-family: sans-serif;
text-decoration: none;
font-size: 0.9em;
text-align: center;
text-indent: 15px;
margin: 2px;
border-radius: 12px;
align-items: center;
}
.down-button{
width: 100%;
text-align: center;
}
.buttonDownload:hover {
background-color: #333;
color: white;
}
.buttonDownload:before, .buttonDownload:after {
content: ' ';
display: block;
position: absolute;
left: 15px;
top: 52%;
}
/* Download box shape */
.buttonDownload:before {
width: 15px;
height: 2px;
border-style: solid;
border-width: 0 2px 2px;
}
/* Download arrow shape */
.buttonDownload:after {
width: 0px;
height: 0px;
margin-left: 3px;
margin-top: -7px;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: transparent;
border-top-color: inherit;
animation: downloadArrow 2s linear infinite;
animation-play-state: paused;
}
.buttonDownload:hover:before {
border-color: #4CC713;
}
.buttonDownload:hover:after {
border-top-color: #4CC713;
animation-play-state: running;
}
.milkparagraph{
color: #FF4500;
font-size: 19px;
margin: 15px;
}
.milkdownbox{
border: 2px solid #365194;
padding: 0px 5% 7px 2%;
border-radius: 12px;
margin: 17px 0% 20px;
width: fit-content;
}
/* keyframes for the download icon anim */
#keyframes downloadArrow {
/* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
0% {
margin-top: -7px;
opacity: 1;
}
0.001% {
margin-top: -15px;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
margin-top: 0;
opacity: 0;
}
}
</style>
<div class="syltp">
<script type="text/javascript">
$(function(){
$('#button').click(function(){
if(!$('#iframe').length) {
$('#iframeHolder').html('<iframe id="iframe" src="https://drive.google.com/file/d/1GEsC2NXwLjvV4N2JCPqAqAxqMEt3uro0/preview" width="700" height="400" style="border: 1px solid black;"></iframe>');
}
});
});
</script>
<h4> <span style="font-family: 'Open Sans';"><i aria-hidden="true" class="fa fa-sticky-note"></i>Preview without jquery</span></h4>
<div class="down-button" id="button"><b class="buttonDownload">PREVIEW</b></div>
<br />
<div id="iframeHolder"></div>
</div>
</body>
</html>
it is my present code if I add the above-mentioned jquery its works fine but here I removed it now it's not working
so I want to work it without jquery
That sticky sidebar should auto-scroll with the main content but when I used to frame the sidebar not scrolling down. It also block my comment frame
Check this, Is this what do you need?
const btn = document.querySelector("button.openIframe");
const frame = document.getElementById("frame");
btn.addEventListener("click", toggleIframe);
function toggleIframe(){
var src = "https://www.jqueryscript.net/";
frame.classList.toggle("d-none");
btn.classList.toggle("opened");
if(btn.classList.contains("opened")){
btn.innerHTML = "Close IFrame";
src = prompt("Enter a Source :", "https://www.jqueryscript.net/");
}
else{
btn.innerHTML = "Open IFrame";
}
frame.src = src;
}
.d-none{ display:none; }
<button class="openIframe">Open IFrame</button>
<iframe id=frame class="d-none" width="100%" height="60%">
</iframe>
Or Same in a Better Way ( Update )
const btn = document.querySelector("#load");
const src = document.querySelector("#src");
const frame = document.querySelector("#frame");
btn.addEventListener("click", toggleFrame);
function toggleFrame(){
frame.src = "about:blank";
if(src.value !== null){
src.classList.toggle("d-none");
btn.classList.toggle("opened");
frame.src = src.value;
frame.classList.toggle("d-none");
if(btn.classList.contains("opened"))
btn.innerHTML = "Close";
else
btn.innerHTML = "Load";
}
}
.d-none{ display:none; }
<input id=src placeholder="Enter a SRC" value="https://www.jqueryscript.net/"><button id=load>Load</button>
<iframe id=frame class=d-none width="100%"></iframe>
iFrame
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.
Every part of the following code player works fine expect the CSS part of it.
It can display HTML and JS without problem. I've tried to fix it but I couldn't. even Chrome console is not pointing to any error. I think the problem is here:
$("#runButton").click(function() {
$('#resultFrame').contents().find('html').html("<style>"+$
('#css').val()+"</style>"+$("#html").val());
document.getElementById('resultFrame').contentWindow.eval( $
('#js').val() );
});
And here is all of the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Sadegh's code player</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<style type="text/css">
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
#menubar {
width: 100%;
height: 40px;
background-color: #6C4141;
}
#logo {
padding: 10px 0 0 15px;
font-weight: bold;
font-size: 1.15em;
float: left;
color: white;
text-shadow: 1px 1px 3px gray;
}
#button {
float: right;
padding: 5px 20px 0 0;
}
#runButton {
font-size: 1.15em;
font-weight: bold;
height: 30px;
width: 60px;
border-radius: 4px;
color: #875D5D;
border: 1px solid #8E7272;
background-color: white;
text-shadow: 1px 1px black;
}
#runButton:hover {
background-color: #8E7272;
color: white;
border: 1px solid white;
}
#toggles {
width: 400px;
margin: 0px auto;
height: 100%;
}
#toggles ul {
list-style-type: none;
}
.toggleLi {
display: inline-block;
padding: 7px 5px 5px 5px;
border: 1px solid white;
border-radius: 5px 5px 0 0;
background-color: #8E7272;
height:30px;
margin-top: 10px;
width: 95px;
text-align: center;
border-bottom: 0;
color: white;
font-weight: bold;
}
.selected {
background-color: white;
color: #875D5D;
border: 1px solid gray;
}
.clear {
clear: both;
}
.codeContainer {
width: 25%;
float:left;
height: 100%;
position: relative;
}
.codeContainer textarea {
width: 100%;
height: 100%;
border: none;
border-right: 1px ridge #875D5D;
padding: 15px;
font-family: Console, Lucida, monospace;
font-size: 18px;
}
.codeLable {
position: absolute; top: 10px; right: 10px;
border-bottom: 1px solid #875D5D;
padding: 0 2px 2px 2px;
}
#resultFrame {
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="menubar">
<div id="logo">Code Player</div>
<div id="button">
<button type="button" id="runButton">Run</button>
</div>
<div id="toggles">
<ul>
<li class="toggleLi selected">HTML</li>
<li class="toggleLi selected">CSS</li>
<li class="toggleLi selected">JS</li>
<li class="toggleLi selected">Result</li>
</ul>
</div>
<div class="clear"></div>
<!-- html container -->
<div class="codeContainer" id="HTMLContainer">
<div class="codeLable">HTML</div>
<textarea name="textarea" id="html">Some text</textarea>
</div>
<!-- css container -->
<div class="codeContainer" id="CSSContainer">
<div class="codeLable">CSS</div>
<textarea name="textarea" id="css">body {
background-color: red;
}
</textarea>
</div>
<!-- javascript container -->
<div class="codeContainer" id="JSContainer">
<div class="codeLable">JavaScript</div>
<textarea name="textarea" id="js">alert('Thatsit')</textarea>
</div>
<!-- result iframe -->
<div class="codeContainer" id="ResultContainer">
<div class="codeLable">Result</div>
<iframe id="resultFrame"></iframe>
</div>
</div><!-- end of #menubar -->
</div><!-- end of page wrapper -->
<script type="text/javascript">
var windowHeight = $(window).height();
var menubarHeight = $("#menubar").height();
var codeContainerHeight = windowHeight - menubarHeight;
$(".codeContainer").height(codeContainerHeight + "px");
$(".toggleLi").click(function(){
$(this).toggleClass("selected");
var activeDiv = $(this).html();
$("#"+activeDiv+"Container").toggle();
var showingDivs = $(".codeContainer").filter(function() {
return $(this).css("display") !== "none";
}).length;
var width = 100 / showingDivs;
$(".codeContainer").css("width",width + "%");
});
$("#runButton").click(function() {
$('#resultFrame').contents().find('html').html("<style>"+$
('#css').val()+"</style>"+$("#html").val());
document.getElementById('resultFrame').contentWindow.eval( $
('#js').val() );
});
</script>
</body>
</html>
$('#resultFrame').contents().find('html').html("<style>"+$
('#css').val()+"</style>"+$("#html").val());
The $("#html").val() will return only text not include tags,so when user input something in <textarea name="textarea" id="html">Some text</textarea>
you need to wrap into a tag,for example:user input(Some text),wrap to <p>Some text</p>or wrap inside a body tag.Hope this help you.
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.