GetElement / P类和ID问题

时间：2017-06-27 14:24:23

标签： javascript html css getelementbyid getelementsbyclassname

我的代码100％以下在浏览器中运行，所有按钮都按照我想要的方式运行，但是当我将此代码导入Electron以最终作为程序运行时，唯一按钮的工作方式应该是第一个。我理解它是因为我有段落的多个ID，我不应该。因此，为此我删除了所有ID，并将GetElementByID更改为GetElementsByClass。这不起作用，除非我重新插入ID，否则此刻无效。这是ID为

的原始代码 
<!doctype html>
<html>
<head>
<title>What Should I Draw</title>
<style>
.button {
    background-color: #008CBA;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    top: 50%;
}

.wrapper {
    text-align: center;
    }

.demo {
    text-align: center;
    color: #008CBA;
    text-transform: uppercase;
    font-size: 300%;
    }

.remo {
    text-align: center;
    color: #008CBA;
    text-transform: uppercase;
    font-size: 300%;
    }

.temo {
    text-align: center;
    color: #4CAF50;
    text-transform: uppercase;
    font-size: 200%;
    }

.zemo {
    text-align: center;
    color: #4CAF50;
    text-transform: uppercase;
    font-size: 200%;

    }

.kemo {
    text-align: center;
    color: #4CAF50;
    text-transform: uppercase;
    font-size: 200%;

    }

.uemo {
    text-align: center;
    color: #4CAF50;
    text-transform: uppercase;
    font-size: 200%;

    }
.buttons {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    top: 50%;
}

</style>
</head>
<body>

<div class="wrapper">
<input id="btnSearch" class="button" type="button" value="Randomize Subject" onclick="getRandomArrayElements(3);" />
<input id="btnSearch" class="button" type="button" value="Randomize Restriction" onclick="GetValue();" />
</div>
<p id="demo" class="demo"></p>
<p id="remo" class="remo"></p>



<script>

function getRandomArrayElements(count) {


var arr = ['Swamp','Tank','Claws','Flying Tank',

];
    var shuffled = arr.slice(0), i = arr.length, min = i - count, temp, index;
    while (i-- > min) {
        index = Math.floor((i + 1) * Math.random());
        temp = shuffled[index];
        shuffled[index] = shuffled[i];
        shuffled[i] = temp;
    }
document.getElementById("demo").innerHTML=shuffled.slice(min);
}

</script>

<div>

<script>

function GetValue()
{

var myArray = new Array("Steampunk","Horror","Cartoon","Anime","Cheesy",

);
var random = myArray[Math.floor(Math.random() * myArray.length)];

document.getElementById("remo").innerHTML=random;
}
</script>

<div class="wrapper">
<input id="btnSearch" class="buttons" type="button" value="Randomize Type of Landscape" onclick="Landscape();" />
<input id="btnSearch" class="buttons" type="button" value="Randomize Man Made Element" onclick="Manmade();" />
<input id="btnSearch" class="buttons" type="button" value="Randomize Time of Day" onclick="Timeofday();" />
<input id="btnSearch" class="buttons" type="button" value="Randomize Weather" onclick="Weather();" />

<p id="kemo" class="kemo"></p>
<p id="uemo" class="uemo"></p>
<p id="zemo" class="zemo"></p>
<p id="temo" class="temo"></p>


</div>


<script>

function Weather()
{

var myArray = new Array("Clear Skies","Clear Skies","Clear Skies","Clear Skies","Clear Skies",
"Partly Cloudy",
);
var random = myArray[Math.floor(Math.random() * myArray.length)];

document.getElementById("temo").innerHTML=random;
}
</script>

<div>

<script>

function Timeofday()
{

var myArray = new Array("Noon","Morning","Sunrise","Afternoon","Magic Hour","Sundown","Night","Twilight","Aurora","Late Night","Noon","Noon","Noon","Noon","Noon","Noon","Noon",
);
var random = myArray[Math.floor(Math.random() * myArray.length)];

document.getElementById("zemo").innerHTML=random;
}
</script>
<div>
<script>

function Landscape()
{

var myArray = new Array("Canyon","Grand Canyon","Beach","Cliff","Mountain Range",

);
var random = myArray[Math.floor(Math.random() * myArray.length)];

document.getElementById("kemo").innerHTML=random;
}
</script>
<div>
<script>

function Manmade()
{

var myArray = new Array("Cityscape","Futuristic Cityscape","Futuristic City","Futuristic Cityscape",
);
var random = myArray[Math.floor(Math.random() * myArray.length)];

document.getElementById("uemo").innerHTML=random;
}
</script>

</body>
</html>

以下是我为删除ID所做的所有更改，并将其替换为**周围的类。从环顾四周快速更新，用[0]包装getElementById（“demo”）获得第一个工作按钮。如何使其余的工作？

<!doctype html>
<html>
<head>
<title>What Should I Draw</title>
<style>
.button {
    background-color: #008CBA;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    top: 50%;
}

.wrapper {
    text-align: center;
    }

.demo {
    text-align: center;
    color: #008CBA;
    text-transform: uppercase;
    font-size: 300%;
    }

.remo {
    text-align: center;
    color: #008CBA;
    text-transform: uppercase;
    font-size: 300%;
    }

.temo {
    text-align: center;
    color: #4CAF50;
    text-transform: uppercase;
    font-size: 200%;
    }

.zemo {
    text-align: center;
    color: #4CAF50;
    text-transform: uppercase;
    font-size: 200%;

    }

.kemo {
    text-align: center;
    color: #4CAF50;
    text-transform: uppercase;
    font-size: 200%;

    }

.uemo {
    text-align: center;
    color: #4CAF50;
    text-transform: uppercase;
    font-size: 200%;

    }
.buttons {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    top: 50%;
}

</style>
</head>
<body>

<div class="wrapper">
<input id="btnSearch" class="button" type="button" value="Randomize Subject" onclick="getRandomArrayElements(3);" />
<input id="btnSearch" class="button" type="button" value="Randomize Restriction" onclick="GetValue();" />
</div>
**<p class="demo"></p>
<p class="remo"></p>**



<script>

function getRandomArrayElements(count) {


var arr = ['Swamp','Tank','Claws','Flying Tank',

];
    var shuffled = arr.slice(0), i = arr.length, min = i - count, temp, index;
    while (i-- > min) {
        index = Math.floor((i + 1) * Math.random());
        temp = shuffled[index];
        shuffled[index] = shuffled[i];
        shuffled[i] = temp;
    }
document.**getElementsByClassName("demo")**.innerHTML=shuffled.slice(min);
}

</script>

<div>

<script>

function GetValue()
{

var myArray = new Array("Steampunk","Horror","Cartoon","Anime","Cheesy",

);
var random = myArray[Math.floor(Math.random() * myArray.length)];

document.**getElementsByClassName("remo")**.innerHTML=random;
}
</script>

<div class="wrapper">
<input id="btnSearch" class="buttons" type="button" value="Randomize Type of Landscape" onclick="Landscape();" />
<input id="btnSearch" class="buttons" type="button" value="Randomize Man Made Element" onclick="Manmade();" />
<input id="btnSearch" class="buttons" type="button" value="Randomize Time of Day" onclick="Timeofday();" />
<input id="btnSearch" class="buttons" type="button" value="Randomize Weather" onclick="Weather();" />

**<p class="kemo"></p>
<p class="uemo"></p>
<p class="zemo"></p>
<p class="temo"></p>**


</div>


<script>

function Weather()
{

var myArray = new Array("Clear Skies","Clear Skies","Clear Skies","Clear Skies","Clear Skies",
"Partly Cloudy",
);
var random = myArray[Math.floor(Math.random() * myArray.length)];

document.**getElementsByClassName("temo")**.innerHTML=random;
}
</script>

<div>

<script>

function Timeofday()
{

var myArray = new Array("Noon","Morning","Sunrise","Afternoon","Magic Hour","Sundown","Night","Twilight","Aurora","Late Night","Noon","Noon","Noon","Noon","Noon","Noon","Noon",
);
var random = myArray[Math.floor(Math.random() * myArray.length)];

document.**getElementsByClassName("zemo")**.innerHTML=random;
}
</script>
<div>
<script>

function Landscape()
{

var myArray = new Array("Canyon","Grand Canyon","Beach","Cliff","Mountain Range",

);
var random = myArray[Math.floor(Math.random() * myArray.length)];

**document.getElementsByClassName("kemo")**.innerHTML=random;
}
</script>
<div>
<script>

function Manmade()
{

var myArray = new Array("Cityscape","Futuristic Cityscape","Futuristic City","Futuristic Cityscape",
);
var random = myArray[Math.floor(Math.random() * myArray.length)];

**document.getElementsByClassName("uemo")**.innerHTML=random;
}
</script>

</body>
</html>

0 个答案:

没有答案
相关问题
最新问题