我如何在我的js代码中添加ID

时间:2013-12-23 01:45:37

标签: javascript html

我最近创建了一个连接两个单词的网站,为人们创建一个简单的域名。 我想知道如何将ID设置为粗体,以便我可以将变量“材料”放入其中。我希望这些可以更改,以便人们可以从我放入HTML的两个下拉菜单中选择。这可能听起来像一个奇怪的请求,但这是因为我对JavaScript很新,我知之甚少。感谢您的时间。 : - )

我的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;
}

我的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>

为什么不;我的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;

1 个答案:

答案 0 :(得分:1)

你可以尝试:

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

在您的JavaScript代码中。