How to use the input element of type color with javascript to change the font color appearing in an editable iframe

Question

In summary I am trying to:

-get the color they select

-set a variable equal to the value of the color they select

-use that variable to color the selected or current text in the iframe

GOALS: I'm trying to teach myself javaScript by building an interactive Business Canvas Model (a grid with 9 sections for planning out any business). I am interested in a solution to this as well as any observations about mistakes I am making and why they are mistakes. I've watched hours of tutorials and things are just starting to make sense but now as I'm trying to write my own statements in the language I find I am totally lost. I actually have a multitude of questions but I am asking this one because I think understanding the mistakes I've made with this one will show me how the other stuff actually works.

I originally used a textarea instead of the iframe but wanted to add some formatting buttons to the textbox. One of these buttons is the ability to select a color using the selector. I can pick a color on the front end, but then the color just sits there in the box and I'm struggling to figure out how to grab it with javascript and make it change the color of selected font or current font.

I'm currently 58% through an online javaScript course called 'Javascript, Understanding the Weird Parts' on Udemy. I've also watched an embarrassing number of YouTube videos, several on a variety of color selectors and sliders but nothing showing how to do this thing which I naively assume is quite simple if you know the language.

The name of the iFrame (with designMode on) is partnersRTF

The recurring error message: "Unexpected end of input"

The HTML Snippet:

<input type="color" id="js-fontColor" oninput="fontColorFunc('this');" value="#b3130b"/>

Here's the function it calls (which may embarrass me one day):

  var colorValue = document.getElementById("js-fontColor");
  document.partnersRTF.document.style.color = "colorValue";
  console.log("colorValue");
}

console.log is how I am testing to see if the function received a value from the color input. I don't receive a value, just the error message.

Honestly I didn't expect this to work but I can't articulate why it doesn't work. I begin by declaring a variable where I know I want to store the value of the color. Then I try to set that value equal to the input received by the color selector using the getElementById method. Then I target the iframe and try using style.color to set the "color" equal to the colorValue that was stored. But there's nothing here, and nothing I can think of yet, that tells the document to color a font.

What's wrong with my function? And how do I get the javaScript to see what color got selected and then change the color of the font in the iframe?

edit

Here is the code requested, relevant to the iframe named partnersRtf: I apologize I don't want to paste in the full documents, it's a lot.

    </div>
    <iframe name="partnersRTF"></iframe>
  </div>

This is one of 9 sections. In the very beginning of the document I call a function using onload in the body element and it targets the iframe and turns on designMode. This allows the iframe area to be directly editable, and that's where I need to have the font color manipulated.

edit2

Thanks guys! I've got new errors now but that was definitely a rookie mistake sending a string instead of a variable :)

I removed the quotes on colorValue:

  var colorValue = document.getElementById("js-fontColor");
  document.partnersRTF.document.style.color = colorValue;
  console.log(colorValue);
}

Now the error message reads: "Uncaught TypeError: Cannot set property 'color' of undefined at fontColorFunc (businessCanvasModel.js:23) at HTMLInputElement.oninput (index.html:37)"

I've had this same message happen in previous attempts so it's definitely a mistake I'm repeating. All I can think of is that when the javaScript is read by the interpreter it zones through and sets all the variables equal to undefined before it runs the code, which means that when it runs the code it's not setting colorValue equal to anything other than undefined, there's something wrong with the way I'm trying to give the color value to the variable. In other words, the variable is staying undefined because it's not receiving the color value. I originally wondered if it was because the color value was black (0,0,0) but that's still a value, that's not undefined and I changed the value to a red.

So, I still have the same question...what else am I doing wrong?

edit3

I've made changes to my code based on the answers I've been given but the particular problem persists: How to color currently selected font and font that is about to be typed. The current code I've used colors the font throughout the entire iframe. This makes choosing a font color pointless since the point of coloring font is to make selected font stand out.

Here is a snippet of the html, including the iframe and links to external files which may help deduce exactly how to target the font within the iframe itself, note that the h3 has nothing to do with the issue.

<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>

Here is the javascript that turns on designMode inside the iframe

window.onload = function enableEditMode() {
  partnersRTF.document.designMode="on";
}

Here is the function for the color picker:

function  fontColorFunc() {
var colorValue = document.getElementById("js-fontColor");
document.partnersRTF.document.body.style.color=colorValue.value;

Success is that we are successfully obtaining the color value, but how do I target only the font that is selected or about to be typed?

edit4

I've uploaded my project as it stands, I'll update the live site when I make successful changes. For those curious and because it might be of use, here is the link to this project:

http://business-model-canvas.neeleyarts.com/

Answer 1

The below code work when you run locally

<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>

Answer 2

The reason this is not working is that you put colorValue as string instead of variable colorValue. ideally it should be

  var colorValue = document.getElementById("js-fontColor");

  document.getElementById("js-fontColor").style.color = colorValue;

  console.log(colorValue);