CODEWITHSUNDEEP
javascripthtml
user1901218
user1901218

Reputation: 21

How do i put a ID in my js code

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;

Upvotes: 0

Views: 123

Answers (1)

Morgan Ellingham
Morgan Ellingham

Reputation: 198

You could try:

document.getElementById("elementname").value = variableName

In your JavaScript code.

Upvotes: 1

Related Questions