Iframe - это srcdoc, который не обновляется при использовании переменной

Переменные не работают для srcdoc моего iframe, или вы не можете использовать div.value или что-то в этом роде. Когда я использую переменную для srcdoc iframe, html (srcdoc) iframe не обновляется. Этот код от меня, пытающегося сделать редактор кода. Пожалуйста, помогите, я в порядке с использованием jQuery. это не сделано

const html = document.getElementById("html");
const css = document.getElementById("css");
const js = document.getElementById("js");
var edH = document.getElementById("edH");
var edC = document.getElementById("edC");
var edJ = document.getElementById("edJ");
var ifr = document.getElementById("res");
var cssCode;
var htmlCode;
var jsCode;

html.addEventListener("click", changeHTML);
css.addEventListener("click", changeCss);
js.addEventListener("click", changeJs);
html.addEventListener("keydown", update);
function changeHTML() {
  htmlCode = edH.value;
  jsCode = edJ.value;
  cssCode = edC.value;
  edH.value = htmlCode;
  edH.style.display = "block";
  edC.style.display = "none";
  edJ.style.display = "none";
}

function changeCss() {
  htmlCode = edH.value;
  jsCode = edJ.value;
  cssCode = edC.value;
  edC.value = cssCode;
  edC.style.display = "block";
  edH.style.display = "none";
  edJ.style.display = "none";
}

function changeJs() {
  htmlCode = edH.value;
  jsCode = edJ.value;
  cssCode = edC.value;
  edJ.style.display = "block";
  edC.style.display = "none";
  edH.style.display = "none";
}

function update() {
  ifr.srcdoc = edH.value;
}

<!DOCTYPE html>
<html lang = "en">
  <head>
    <meta charset = "UTF-8" />
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
    <meta http-equiv = "X-UA-Compatible" content = "ie=edge" />
    <title>Static Template</title>
  </head>
  <body>
    <div id = "tab" class = "tabs">
      <p class = "langs" id = "lang">
        <span id = "html">HTML</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span id = "css">CSS</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span id = "js">Javascript</span>
      </p>
    </div>
    <div id = "edH" class = "edH" contenteditable = "true"></div>
    <div id = "edC" class = "edC" contenteditable = "true"></div>
    <div id = "edJ" class = "edJ" contenteditable = "true"></div>
    <iframe id = "res" width = "500px" height = "200px"></iframe>
  </body>
  <script src = "main.js"></script>
</html>

srcdoc iframe не будет обновляться до edH.value.
демо: https://codesandbox.io/s/lucid-haze-m95ht3
Спасибо.

Вы добавляете прослушиватель событий keydown в диапазон; нет места для ввода диапазона.

— 16.03.2022 19:51

Я такой тупой, можешь ответить на это, чтобы я мог сделать это ответом. Спасибо, это сработало.

— 16.03.2022 21:30

javascript html iframe

16.03.2022 19:45

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный