Different position of two buttons every time page refresh-CodePudding

I am making mini project where you have to guess color code based on the color you see in div which is generated random. One button is correct answer (the real color's number) and the second button has random number, so you have to guess between two options. My question is, how I can make the buttons change position, so the correct button is not always on one position.

**Codepen**: https://codepen.io/Sim9n/pen/vYrYyrp

function generateRandomIntegerInRange(min, max) {
    return Math.floor(Math.random() * (max - min   1))   min;
}

let value5 = generateRandomIntegerInRange(100000, 999999);


document.getElementById("color").style.backgroundColor = `#${value5}`


let k = document.getElementById("dk")
k.textContent = `Correct answer: ${value5}`
document.querySelector("#guess").appendChild(k)

let o = document.createElement("button")
o.textContent = value5
document.querySelector("#firstGuess").appendChild(o)


/////////////
function generateRandomIntegerInRangee(minn, maxx) {
    return Math.floor(Math.random() * (maxx - minn   1))   minn;
}

let value6 = generateRandomIntegerInRangee(100000, 999999);


// let z = document.getElementById("firstGuess")
// z.textContent = value6
// document.querySelector("#firstGuess").appendChild(z)

let p = document.createElement("button")
p.textContent = value6
document.querySelector("#firstGuess").appendChild(p)

/////////////

#color{
    background-color: #627246;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(50% , -50%);   
}

  <div id="color"></div>
  <div id="guess"></div>
  <div id="dk"></div>
  <div id="firstGuess"></div>

Thank you <3

CodePudding user response：

You could make the div wrapping the buttons (firstGuess) display flex. Then simply add order 1 or 0 to the button

CSS

#firstGuess {
   display: flex;
}

let o = document.createElement("button")
o.textContent = value5
o.style.order = 0

You could make it randomly change each time by checking for value5

o.style.order = value5 > 500000 ? 1 : 0

CodePudding user response：

You can create an array of your options and then shuffle it to make it random.

function generateRandomIntegerInRange(min, max) {
    return Math.floor(Math.random() * (max - min   1))   min;
}

function shuffle(array) {
  let currentIndex = array.length,  randomIndex;

  while (currentIndex != 0) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;

    [array[currentIndex], array[randomIndex]] = [
      array[randomIndex], array[currentIndex]];
  }

  return array;
}

let answer = generateRandomIntegerInRange(100000, 999999);

document.getElementById("color").style.backgroundColor = `#${answer}`

let options = [answer, generateRandomIntegerInRange(100000, 999999), generateRandomIntegerInRange(100000, 999999), generateRandomIntegerInRange(100000, 999999)]

gusses = shuffle(options)

options.forEach((option)=> {
  let p = document.createElement("button")
  p.textContent = option
  document.querySelector("#firstGuess").appendChild(p)
})

let k = document.getElementById("dk").textContent = `Correct answer: ${answer}`
document.querySelector("#guess").appendChild(k)