Javascript Timer On Text

scissors, paper game in javascript. The language is in Norwegian. I want to set a timer to a part of the text so that it will appear some seconds after the rest of the text. Here'

Solution 1:

Use setTimeout function.

var decide = prompt("Skriv inn enten (stein, saks eller papir)");
var tekst = "";
var random = Math.floor(Math.random() * 3) + 1; // stein = 1 saks = 2 papir = 3if (['stein', 'saks', 'papir'].indexOf(decide) !== -1) {
  tekst = 'Du valgte ' + decide + 'mens pc\'en valgte ';

  switch (random) {
    case1:
      tekst += 'stein';
      break;
    case2:
      tekst += 'saks';
      break;

    case3:
      tekst += 'papir';
      break;
  }

  var result = 'Uavgjort';

  switch (decide) {
    case'stein':
      if (random == 2) {
        result = 'Du vant';
      } elseif (random == 3) {
        result = 'Du tapte';
      }
      break;
    case'saks':
      if (random == 1) {
        result = 'Du tapte';
      } elseif (random == 3) {
        result = 'Du vant';
      }
      break;
    case'papir':
      if (random == 2) {
        result = 'Du tapte';
      } elseif (random == 1) {
        result = 'Du vant';
      }
      break;
  }

  var el = document.getElementById('output');
  el.innerHTML = tekst;

  setTimeout(function() {
    el.innerHTML += ' ' + result;
  }, 2000);
}

<spanid="output"></span>

---

Also if it's scissors, paper, rock game, than have a look at this question

var choices = ["rock", "paper", "scissors"];
var map = {};

choices.forEach(function(choice, i) {
    map[choice] = {};
    map[choice][choice] = "Was a tie"
    map[choice][choices[(i+1)%3]] = choices[(i+1)%3] + " wins"
    map[choice][choices[(i+2)%3]] = choice + " wins"
})

functioncompare(choice1, choice2) {
    return (map[choice1] || {})[choice2] || "Invalid choice";
}

alert(
  compare(
    prompt('Your choice (rock, paper, scissors)'),
    choices[Math.floor(Math.random() * 3)]
  )
);

Solution 2:

Here is a way you could implement your rock/paper/sizzors game by making use of a dropdown, and showing the text in a delayed way.

The main point to show the text in a delayed way is this code:

functionshowResult( targetElement, text ) {
  setTimeout(function() {
    document.getElementById(targetElement).innerHTML = text;
    document.getElementById('runner').disabled = false;
  }, 3000);
}

it will delay the actual action by 3000 ms (3 seconds), and then show the text as part of the innerHTML of the target element (as you will see from the snippet, this will be a div)

var values = [
  { value: 'rock', wins: ['sizzors'] }, 
  { value: 'paper', wins: ['rock'] }, 
  { value: 'sizzors', wins: ['paper'] }
];

window.addEventListener('load', function() {
  functionaddOption(item, value) {
    var opt = newOption();
    opt.value = value;
    opt.text = value;
    item.options.add(opt);
  }
  
  var sel = document.getElementById('choice');
  addOption(sel, 'make your choice');
  for (var i = 0, len = values.length; i < len; i++) {
    addOption(sel, values[i].value );
  }
});

functionresetResult() {
  document.getElementById('result').innerHTML = '';
  document.getElementById('runner').disabled = false;
}

functionsolve(sourceElement, targetElement) {
  document.getElementById('runner').disabled = true;
  var choice = document.getElementById(sourceElement);
  if (choice.selectedIndex <= 0) {
    alert('make your choice before clicking "Run"');
    return;
  }
  var choiceName = choice.options[choice.selectedIndex].value;
  var cpuValueIndex = parseInt(Math.random() * values.length);
  var cpuValue = values[cpuValueIndex];
  if ( cpuValue.value === choiceName ) {
    showResult( targetElement, 'Tie' );
  } elseif ( cpuValue.wins.indexOf( choiceName ) >= 0 ) {
    showResult( targetElement, 'Cpu chose ' + cpuValue.value + ', you loose' );
  } else {
    showResult( targetElement, 'Cpu chose ' + cpuValue.value + ', you win' );
  }
}

functionshowResult( targetElement, text ) {
  setTimeout(function() {
    document.getElementById(targetElement).innerHTML = text;
    document.getElementById('runner').disabled = false;
  }, 3000);
}

option, select {
  text-transform: capitalize;
}

<selectid="choice"onchange="resetResult()"></select><buttontype="button"id="runner"onclick="solve('choice', 'result')">Run</button><divid="result"></div>