Спрятать один елемент и показать второй после события

351

08 февраля 2017, 23:06

Есть простой генератор (ссылка на codepen). Как после алерта спрятать кнопку "ask" и показать "new"?

function GetValue() 
    { 
        var myarray = new Array("word1","word2","word3"); 
        var random = myarray[Math.floor(Math.random() * myarray.length)]; 
       document.getElementById("message").innerHTML=random; 
    }; 
    //rand array element 
     
    var clicks = 0; 
    function onClick() { 
        clicks += 1; 
        document.getElementById("clicks").innerHTML = clicks; 
      printMessage(document.getElementById("message").innerHTML,clicks); 
    }; 
    //count clicks 
     
    function printMessage(random, clicks) { 
      if (random === "word1") { 
        document.getElementById("alert").innerHTML = 
        "wow, after " + clicks + " clicks"; 
      } 
    } 
    //display "you get word1 after _ clicks" 
     
    function myFunction() { 
        location.reload(); 
    } 
    //reload

<body> 
  <textarea id="message" rows="1"></textarea> 
  <input type="button" id="btnSearch" value="ask" onclick="GetValue();onClick()" /> 
 
 
<p>attempts: <a id="clicks">0</a></p> 
 
<p id="alert"></p> 
 
<button id="reload" onclick="myFunction()">new</button>

Answer 1

Ну вот так

function GetValue() { 
  var myarray = new Array("word1", "word2", "word3"); 
  var random = myarray[Math.floor(Math.random() * myarray.length)]; 
  document.getElementById("message").innerHTML = random; 
}; 
//rand array element 
 
var clicks = 0; 
 
function onClick() { 
  clicks += 1; 
  document.getElementById("clicks").innerHTML = clicks; 
  printMessage(document.getElementById("message").innerHTML, clicks); 
}; 
//count clicks 
 
function printMessage(random, clicks) { 
  if (random === "word1") { 
    document.getElementById("alert").innerHTML = 
      "wow, after " + clicks + " clicks"; 
    document.getElementById("btnSearch").style.display = "none"; 
    document.getElementById("reload").style.display = "block"; 
  } 
}; 
//display "you get word1 after _ clicks" 
 
 
function myFunction() { 
  location.reload(); 
}; 
//reload

#reload { 
  display: none; 
}

<textarea id="message" rows="1"></textarea> 
<input type="button" id="btnSearch" value="ask" onclick="GetValue();onClick()" /> 
 
<p>attempts: <span id="clicks">0</span> 
</p> 
 
<p id="alert"></p> 
 
<button id="reload" onclick="myFunction()">new</button>