Вы можете изначально скрыть изображение с помощью CSS в теге стиля:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>random image?</title>
<style>
img{
display:none;
}
</style>
<script>
function showImage(){
document.getElementsByTagName("img")[0].style.display = "inline-block";
}
</script>
</head>
<body>
<script type = "text/javascript">
<!--
document.write("<img src = \"" + Math.floor(1 + Math.random() * 42) + ".jpg\" />");
</script>
<button onclick="showImage();">show</button>
</body>
</html>
Или набрав его непосредственно во встроенном атрибуте стиля:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>random image?</title>
<script>
function showImage(){
document.getElementsByTagName("img")[0].style.display = "inline-block";
}
</script>
</head>
<body>
<script type = "text/javascript">
<!--
document.write("<img src = \"" + Math.floor(1 + Math.random() * 42) + ".jpg\" style=\"display:none;\"/>");
</script>
<button onclick="showImage();">show</button>
</body>
</html>
Или позвонив функция JavaScript при загрузке страницы (с риском мигания изображения на экране, прежде чем оно будет скрыто):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>random image?</title>
<script>
function hideImage(){
document.getElementsByTagName("img")[0].style.display = "none";
}
function showImage(){
document.getElementsByTagName("img")[0].style.display = "inline-block";
}
</script>
</head>
<body onload="hideImage();">
<script type = "text/javascript">
<!--
document.write("<img src = \"" + Math.floor(1 + Math.random() * 42) + ".jpg\"/>");
</script>
<button onclick="showImage();">show</button>
</body>
</html>
Если бы я сделал это сам, я бы сделал это так:
Функция rando получена из инструмента под названием rando. js, который я использую для упрощения случайности в javascript и повышения его читабельности. Это не собственная функция JavaScript, поэтому я использую эту строку:
<script src="https://randojs.com/1.0.0.js"></script>
У каждого свой стиль. Выберите технику, которая лучше всего подходит для вас.