如何使用 JavaScript 中颜色类型的输入元素来更改可编辑 iframe 中显示的字体颜色
总之，我试图：
-获取他们选择的颜色
-设置一个等于他们选择的颜色值的变量
-使用该变量为 iframe 中选定的或当前的文本着色
目标： 我试图通过构建一个交互式业务画布模型（一个包含 9 个部分的网格，用于规划任何业务）来自学 javaScript。我对这个问题的解决方案以及对我所犯的错误及其原因的任何观察都很感兴趣。我已经看了几个小时的教程，事情才刚刚开始变得有意义，但现在，当我试图用这种语言编写自己的语句时，我发现自己完全迷失了方向。我实际上有很多问题，但我问这个问题是因为我认为理解我在这个问题上犯的错误会让我了解其他东西实际上是如何工作的。
我最初使用的是文本区域而不是 iframe，但想在文本框中添加一些格式化按钮。其中一个按钮是使用选择器选择颜色的功能。我可以在前端选择一种颜色，但颜色只会停留在框中，而我正在努力弄清楚如何使用 javascript 来获取它并使其更改所选字体或当前字体的颜色。
我目前已完成 Udemy 上名为“Javascript，理解奇怪的部分”的在线 javaScript 课程的 58%。我也观看了数量惊人的 YouTube 视频，其中有几个是关于各种颜色选择器和滑块的，但没有一个视频展示如何做这件事，我天真地认为如果你懂语言的话，这件事很简单。
iFrame 的名称（设计模式开启）是 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 中的字体颜色？
编辑
以下是请求的代码，与名为 partnersRtf 的 iframe 相关： 抱歉，我不想粘贴完整文档，因为太多了。
</div>
<iframe name="partnersRTF"></iframe>
</div>
这是 9 个部分之一。在文档的最开始，我使用 body 元素中的 onload 调用一个函数，它以 iframe 为目标并打开 designMode。这允许直接编辑 iframe 区域，这就是我需要操纵字体颜色的地方。
edit2
谢谢大家！我现在遇到了新的错误，但那绝对是新手犯的错误，发送了字符串而不是变量 :)
我删除了 colorValue 上的引号：
var colorValue = document.getElementById("js-fontColor");
document.partnersRTF.document.style.color = colorValue;
console.log(colorValue);
}
现在错误消息显示： “未捕获的 TypeError：无法设置未定义的属性‘color’ 在 fontColorFunc (businessCanvasModel.js:23) 在 HTMLInputElement.oninput (index.html:37)”
我之前尝试时也遇到过同样的消息，所以这绝对是我重复的错误。我所能想到的是，当解释器读取 javaScript 时，它会在运行代码之前进行分区并将所有变量设置为未定义，这意味着当它运行代码时，它不会将 colorValue 设置为未定义以外的任何值，我尝试为变量赋予颜色值的方式有问题。换句话说，变量保持未定义状态，因为它没有接收颜色值。我最初想知道是不是因为颜色值为黑色（0,0,0），但这仍然是一个值，不是未定义的，而我将值更改为红色。
所以，我仍然有同样的问题......我还做错了什么？
edit3
我根据给出的答案更改了我的代码，但特定问题仍然存在：如何为当前选定的字体和即将输入的字体着色。我使用的当前代码为整个 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>
这是在 iframe 内打开 designMode 的 javascript
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
我已经按原样上传了我的项目，当我成功进行更改时，我会更新实时网站。对于那些好奇并且可能有用的人来说，这里是该项目的链接：
以下代码在本地运行时有效
<iframe name="partnersRTF" >some text</iframe>
<input type="color" id="js-fontColor" oninput="fontColorFunc('this');" value="#b3130b"/>
<script>
window.onload = function() {
var iframes = document.getElementsByTagName('iframe');
for (var i = 0, len = iframes.length, doc; i < len; ++i) {
doc = iframes[i].contentDocument || iframes[i].contentWindow.document;
doc.body.innerHTML ="some text";
doc.designMode = "on";
}
};
function fontColorFunc (){
var colorValue = document.getElementById("js-fontColor");
document.partnersRTF.document.body.style.color=colorValue.value ;
}
</script>此方法不起作用的原因是您将 colorValue 设置为字符串而不是变量 colorValue 。理想情况下应该是
var colorValue = document.getElementById("js-fontColor");
document.getElementById("js-fontColor").style.color = colorValue;
console.log(colorValue);