W podanym przez Ciebie przykładzie
const stala = '<img src="img/relict1_1.png" class="relict" /><span onclick="buy_relict(relict1_cost, 1)" style="cursor: pointer;">Buy ('+relict1_cost+' coins)</span>';
document.getElementById("action1").innerHTML = stala;
użycie stałej nie wiele wnosi, poza niewielką poprawą czytelności kodu,
ale w odniesieniu no innego Twojego kodu
function relict_shop()
{
document.getElementById("action1").innerHTML = '<img src="img/relict1_1.png" class="relict" /><span onclick="buy1()">Buy 1</span>';
document.getElementById("action2").innerHTML = '<img src="img/relict2_1.png" class="relict" /><span onclick="buy2()">Buy 2</span>';
document.getElementById("action3").innerHTML = '<img src="img/relict3_1.png" class="relict" /><span onclick="buy3()">Buy 3</span>';
document.getElementById("action4").innerHTML = '<img src="img/relict4_1.png" class="relict" /><span onclick="buy4()">Buy 4</span>';
}
mogło by go znacząco skrócić (szczególnie jakby elementów "action" było więcej niż 4), ale jak napisał @adrian17
... nie powinieneś używać innerHTML, ... twórz elementy dynamicznie z createElement
lepiej użyć wspomniany document.createElement().
Przykład (w oparciu o fragment Twojego kodu)
<div id="action" class="action">
<div id="action1" class="inaction"></div>
<div id="action2" class="inaction"></div>
<div id="action3" class="inaction"></div>
<div id="action4" class="inaction"></div>
</div>
.action
{
float: right;
width: 960px;
height: 202px;
background-color: green;
margin: 10px 10px 0px 0px;
}
.inaction
{
width: 450px;
height: 71px;
margin: 17px 10px 0px 15px;
float: left;
background-color: red;
text-align: center;
font-size: 20px;
display: flex;
justify-content : center;
align-items: center;
}
.relict
{
width: 25px;
height: 25px;
margin-right: 10px;
}
// ...
window.onload = loading;
function loading()
{
// ...
relict_shop();
}
function relict_shop()
{
// [...document.querySelectorAll('div#action div[id^="action"]')]
[...document.querySelectorAll('#action [id^="action"]')].forEach((div, index) => {
const img = document.createElement('img');
img.setAttribute('src', `img/relict${(++index)}_1.png`);
img.classList.add('relict');
const span = document.createElement('span');
span.setAttribute('onClick', `buy${index}()`);
span.textContent = `Buy ${index}`;
div.appendChild(img);
div.appendChild(span);
});
}