CODEWITHSUNDEEP
javascripthtmlcssbutton
Nacho
Nacho

Reputation: 11

Text Output of Button Javascript Issue

I have a small issue, I have two sets of two buttons and when I press the top pairs of buttons they show the output java array text below the buttons. On the second set of buttons below this it displays the text above the buttons and im not sure why it is doing that. Here is the code:

function Timeofday() {
  var myArray = new Array("One", "Two", "Three", "Four", );
  var random = myArray[Math.floor(Math.random() * myArray.length)];

  document.getElementById("zemo").innerHTML = random;
}

function Weather() {
  var myArray = new Array("One", "Two", "Three", "Four", );
  var random = myArray[Math.floor(Math.random() * myArray.length)];

  document.getElementById("temo").innerHTML = random;
}

function GetValue() {
  var myArray = new Array("One", "Two", "Three", "Four", );
  var random = myArray[Math.floor(Math.random() * myArray.length)];

  document.getElementById("remo").innerHTML = random;
}

function getRandomArrayElements(count) {
  var arr = ['one', 'two', 'three', 'four'];
  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);
}
.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: 300%;
}

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

.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%;
}
<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>
<p id="temo" class="temo"></p>
<p id="zemo" class="zemo"></p>

<div>
  <div>
    <div>
    </div>
  </div>

  This is where the text displays above the buttons

  <div class="wrapper">
    <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();" />
  </div>

  <div>

Upvotes: 0

Views: 104

Answers (2)

genestd
genestd

Reputation: 404

The reason is because of the order of elements in your HTML file. The javascript is selecting the <p> tags and populating them with the results of the function. The <p> tags are positioned below the first set of buttons and above the second set of buttons in your HTML file

Upvotes: 1

Matt
Matt

Reputation: 5428

Because you're always setting the innerHTML on temo and zemo for the bottom buttons and they are located above the buttons.

If you want the next below simply move those divs below the second set of buttons. If you're trying to do something else, edit your question and clarify.

Upvotes: 0

Related Questions