Text Output of Button Javascript Issue

Question

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>

"the output java array" - JavaScript != Java. Is any of that CSS relevant to what you're asking? (If not we don't need to see it.) — nnnnnn
– nnnnnn, Commented Jun 27, 2017 at 4:27
Well the top pair of buttons do what i want them to do, have the text below the first pair but above the second pair. The second pair of buttons display the text above them and I want them below. — Nacho
– Nacho, Commented Jun 27, 2017 at 4:27

genestd · Accepted Answer · 2017-06-27 04:35:21Z

1

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

answered Jun 27, 2017 at 4:35

genestd

4044 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Matt · Accepted Answer · 2017-06-27 04:29:41Z

0

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.

answered Jun 27, 2017 at 4:29

Matt

5,4381 gold badge34 silver badges59 bronze badges

2 Comments

Nacho Over a year ago

Thanks, that worked! I moved those down and that did what I wanted it to do. I appreciate the help.

Matt Over a year ago

If you look at your original question you'll notice I updated your code in the snippet. You don't need all the script blocks. You can have one block that contains all the code.

Collectives™ on Stack Overflow

Text Output of Button Javascript Issue

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related