Javascript timer on text

Question

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's the code:

    <script>

        }
        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 = 3

        if(decide === "stein" && random === 2) {
            tekst = "Du valgte stein, mens pc'en valgte saks. Du vant ";
        }
        else if(decide === "stein" && random === 3) {
            tekst = "Du valgte stein, mens pc'en valgte papir. Du tapte";
        }
        else if(decide === "stein" && random === 1) {
            tekst = "Du valgte stein, mens pc'en valgte stein. Uavgjort";
        }
        else if(decide === "saks" && random === 3) {
            tekst = "Du valgte saks, mens pc'en valgte papir. Du vant";
        }
        else if(decide === "saks" && random === 2) {
            tekst = "Du valgte saks, mens pc'en valgte saks. Uavgjort";
        }
        else if(decide === "saks" && random === 1) {
            tekst = "Du valgte saks, mens pc'en valgte stein. Du tapte";
        }
        else if(decide === "papir" && random === 3) {
            tekst = "Du valgte papir, mens pc'en valgte papir. Uavgjort";
        }
        else if(decide === "papir" && random === 2) {
            tekst = "Du valgte papir, mens pc'en valgte saks. Du tapte";
        }
        else if(decide === "papir" && random === 1) {
            tekst = "Du valgte papir, mens pc'en valgte stein. Du vant";
        }

        document.write(tekst);




    </script>

so that for example tekst = "Du valgte stein, mens pc'en valgte saks. Du vant "; and then mens pc'en valgte saks. Du vant "; will appear 3 seconds later. Help pls

Answer 1

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:

function showResult( 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() {
  function addOption(item, value) {
    var opt = new Option();
    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 );
  }
});

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

function solve(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' );
  } else if ( cpuValue.wins.indexOf( choiceName ) >= 0 ) {
    showResult( targetElement, 'Cpu chose ' + cpuValue.value + ', you loose' );
  } else {
    showResult( targetElement, 'Cpu chose ' + cpuValue.value + ', you win' );
  }
}

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

option, select {
  text-transform: capitalize;
}

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

Answer 2

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 = 3

if (['stein', 'saks', 'papir'].indexOf(decide) !== -1) {
  tekst = 'Du valgte ' + decide + 'mens pc\'en valgte ';

  switch (random) {
    case 1:
      tekst += 'stein';
      break;
    case 2:
      tekst += 'saks';
      break;

    case 3:
      tekst += 'papir';
      break;
  }

  var result = 'Uavgjort';

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

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

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

<span id="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"
})

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

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