Javascript OnClick заменить весь внутренний HTML контента сНа

Question

При нажатии на ТЕАТРЕ он должен изменить НОРМАЛЬНЫЙ с новой функцией в месте

пример из:

<div id="links"> 
 
<a onClick="refreshStream()" onmouseover="color:red;" style="cursor: pointer;" draggable="false" oncontextmenu="return false;">&nbsp;&nbsp; REFRESH</a> 
 
<a onClick="TheaterMode()" onmouseover="color:red;" style="cursor: pointer;" draggable="false" oncontextmenu="return false;">&nbsp;&nbsp; THEATER</a> 
 
</div>

TO:

<div id="links"> 
 
<a onClick="refreshStream()" onmouseover="color:red;" style="cursor: pointer;" draggable="false" oncontextmenu="return false;">&nbsp;&nbsp; REFRESH</a> 
 
<a onClick="normalsize()" onmouseover="color:red;" style="cursor: pointer;" draggable="false" oncontextmenu="return false;">&nbsp;&nbsp; NORMAL</a>"; 
 
</div>

Я пробовал это, но он не работал, надеюсь, кто-то может помочь вам.

<script> 
 
document.getElementById("links").innerHTML = "<a onClick="refreshStream()" onmouseover="color:red;" style="cursor: pointer;" draggable="false" oncontextmenu="return false;">&nbsp;&nbsp; REFRESH</a><a onClick="normalsize()" onmouseover="color:red;" style="cursor: pointer;" draggable="false" oncontextmenu="return false;">&nbsp;&nbsp; NORMAL</a>"; 
 
</script>

Answer 1

Я упростил ваш пример немного. В основном вам нужно будет обернуть html, который вы назначаете в .innerHTML = ... с одинарными кавычками, или использовать \, чтобы избежать кавычек.

Упрощенный пример:

// escape quotes with backslash 
 
function theaterMode() { 
 
    document.getElementById("links").innerHTML = "<a onclick=\"refreshStream()\" style=\"cursor: pointer;\">&nbsp;&nbsp; REFRESH</a><a onclick=\"normalSize()\" style=\"cursor: pointer;\">&nbsp;&nbsp; NORMAL</a>"; 
 
} 
 

 
// or wrap HTML with single quotes 
 
function normalSize() { 
 
    document.getElementById("links").innerHTML = '<a onclick="refreshStream()" style="cursor: pointer;">&nbsp;&nbsp; REFRESH</a><a onclick="theaterMode()" style="cursor: pointer;">&nbsp;&nbsp; THEATER</a>'; 
 
} 
 

 
function refreshStream() { 
 
    document.getElementById("links").innerHTML = "<a onclick=\"refreshStream()\" style=\"cursor: pointer;\">&nbsp;&nbsp; REFRESH</a><a onclick=\"normalSize()\" style=\"cursor: pointer;\">&nbsp;&nbsp; NORMAL</a>"; 
 
}

<div id="links"> 
 
    <a onclick="refreshStream()" style="cursor: pointer;">&nbsp;&nbsp; REFRESH</a> 
 
    <a onclick="theaterMode()" style="cursor: pointer;">&nbsp;&nbsp; THEATER</a> 
 
</div>

Есть чистые способы сделать это, и если вы только изменить то, что вторая ссылка не делает, то есть на самом деле нет причин, чтобы постоянно обновлять первый ссылка.

Надеюсь, это полезно.