В итоге я пытаюсь:
- получить выбранный цвет
- установить переменную, равную значению выбранного ими цвета
- использовать этопеременная для окраски выделенного или текущего текста в iframe
ЦЕЛИ: я пытаюсь научить себя javaScript, создавая интерактивную модель Business Canvas (сетка с 9 разделами для планирования любого бизнеса). Меня интересует решение этой проблемы, а также любые наблюдения за ошибками, которые я делаю, и почему они являются ошибками. Я наблюдал за часами уроков, и вещи только начинают обретать смысл, но теперь, когда я пытаюсь написать свои собственные заявления на языке, который я нахожу, я полностью потерян. У меня действительно есть множество вопросов, но я задаю этот, потому что я думаю, что понимание ошибок, которые я сделал с этим, покажет мне, как на самом деле работают другие вещи.
Изначально я использовал текстовую область вместо iframe, но хотел добавить несколько кнопок форматирования в текстовое поле. Одной из таких кнопок является возможность выбора цвета с помощью селектора. Я могу выбрать цвет на передней части, но тогда цвет просто сидит там, в поле, и я изо всех сил пытаюсь выяснить, как захватить его с помощью JavaScript и заставить его изменить цвет выбранного шрифта или текущего шрифта.
В настоящее время я на 58% изучаю онлайн-курс по javaScript под названием «Javascript, Понимание странных частей» в Udemy. Я также смотрел смущающее количество видео на YouTube, несколько из которых были посвящены различным селекторам цветов и ползункам, но ничего, что показывало, как сделать это, что я наивно полагаю, довольно просто, если вы знаете язык.
НазваниеiFrame (с включенным designMode) является partnersRTF
Повторяющееся сообщение об ошибке: «Неожиданный конец ввода»
Фрагмент HTML:
<input type="color" id="js-fontColor" oninput="fontColorFunc('this');" value="#b3130b"/>
Вот функция, которую она вызывает (которая может смущать меня однажды):
var colorValue = document.getElementById("js-fontColor");
document.partnersRTF.document.style.color = "colorValue";
console.log("colorValue");
}
console.log - это то, как я тестирую, чтобы увидеть, получила ли функция значение из цветного ввода. Я не получаю значение, только сообщение об ошибке.
Честно говоря, я не ожидал, что это сработает, но я не могу четко объяснить, почему это не работает. Я начинаю с объявления переменной, в которой я знаю, что хочу сохранить значение цвета. Затем я пытаюсь установить это значение равным вводу, полученному селектором цвета, используя метод getElementById. Затем я нацеливаюсь на iframe и пытаюсь использовать style.color, чтобы установить «color», равный colorValue, который был сохранен. Но здесь нет ничего, и я еще ничего не могу придумать, что говорит документу раскрасить шрифт.
Что не так с моей функцией? И как мне получить javaScript, чтобы увидеть, какой цвет был выбран, а затем изменить цвет шрифта в iframe?
edit
Вот запрашиваемый код, относящийся к iframe с именем partnersRtf: Я прошу прощения, я не хочу вставлять в полные документы, это много.
</div>
<iframe name="partnersRTF"></iframe>
</div>
Это один из 9 разделов. В самом начале документа я вызываю функцию, используя onload в элементе body, и она нацеливается на iframe и включает designMode. Это позволяет непосредственно редактировать область iframe, и здесь мне нужно манипулировать цветом шрифта.
edit2
Спасибо, ребята! У меня появились новые ошибки, но это определенно была ошибка новичка, посылая строку вместо переменной :)
Я удалил кавычки на colorValue:
var colorValue = document.getElementById("js-fontColor");
document.partnersRTF.document.style.color = colorValue;
console.log(colorValue);
}
Теперь сообщение об ошибке гласит:: "Uncaught TypeError: Невозможно установить свойство 'color' из undefined в fontColorFunc (businessCanvasModel.js: 23) в HTMLInputElement.oninput (index.html: 37)"
У меня было то же самое сообщение в предыдущих попытках, так что это определенно ошибка, которую я повторяю. Все, что я могу думать, это то, что когда javaScript читается интерпретатором, он разбивается на зоны и устанавливает все переменные, равные undefined, перед тем, как запускать код, а это значит, что когда он запускает код, он не устанавливает colorValue равным чему-либо, кроме undefinedчто-то не так с тем, как я пытаюсь передать значение цвета переменной. Другими словами, переменная остается неопределенной, потому что она не получает значение цвета. Первоначально я задавался вопросом, было ли это, потому что значение цвета было черным (0,0,0), но это все еще значение, это не неопределенно, и я изменил значение на красный.
Итак, у меня все тот же вопрос ... что еще я делаю не так?
edit3
IЯ внес изменения в мой код, основываясь на ответах, которые мне дали, но проблема остается: Как закрасить текущий выбранный шрифт и шрифт, который будет набран. Текущий код, который я использовал, окрашивает шрифт во всем iframe. Это делает бессмысленным выбор цвета шрифта, поскольку цель окрашивания шрифта состоит в том, чтобы выделить выделенный шрифт.
Вот фрагмент HTML-кода, включая iframe и ссылки на внешние файлы, которые могут помочь точно определить, как нацелить шрифт в самом iframe, обратите внимание, что h3 не имеет никакого отношения к проблеме.
<title>Business Canvas Model</title>
<meta charset = "utf-8" />
<link rel = "stylesheet" type = "text/css" href="businessCanvasModel.css"/>
<script src="businessCanvasModel.js"></script>
<script src="https://kit.fontawesome.com/d58f589ed9.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="grid-container">
<h1 class="heading">Business Canvas Model</h1>
<div class="partners">
<h3>Key Partners <button onclick="keyPartnersDef()"><i class="fas fa-question"></i></button></h3>
<div class="editorControls">
<input type="color" id="js-fontColor" oninput="fontColorFunc('this');" value="#b3130b"/>
</div>
<iframe name="partnersRTF"></iframe>
</div>
Вот javascript, который включает designMode внутри iframe
window.onload = function enableEditMode() {
partnersRTF.document.designMode="on";
}
Вот функция для палитры цветов:
function fontColorFunc() {
var colorValue = document.getElementById("js-fontColor");
document.partnersRTF.document.body.style.color=colorValue.value;
Успех в том, что мыуспешно получают значение цвета, но как настроить таргетинг только на тот шрифт, который выбран или собирается вводиться?
edit4
IЯ загрузил свой проект в том виде, в каком он есть, я буду обновлять живой сайт, когда внесу удачные изменения. Для любопытных и потому, что это может быть полезно, вот ссылка на этот проект:
http://business -model-canvas.neeleyarts.com /