Change color based on even / odd answer - javascript

My problem is that I'd like the color to switch depending on what the value is, either odd, even or just 0. I've search on stackoverflow for some answers but none really helped..
So, if the answer is odd, the color shall be blue. If the answer is even, the color shall be red. If the answer is 0, the color shall be yellow.
Any clues that could help me keep going?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
body {
background-color: #0D1112;
}
form {
display: flex;
height: 30px;
gap: 30px;
align-items: center;
justify-content: center;
}
p {
color: white;
}
h1 {
color: white;
text-align: center;
}
#svar {
background-color: #0D1112;
}
h4 {
color: white;
}
</style>
</head>
<body>
<form id="f0rm">
<input name="nummer1" id="nummer1" type="text" size="5">
<select id="dropDown" name="thing" id="dropID">
<option>choose</option>
<option value="+">+</option>
<option value="-">-</option>
<option value="x">x</option>
<option value="/">/</option>
</select>
<input name="nummer2" id="nummer2" type="text" size="5"> =
<input type="button" id="calculator" value="Submit">
</form>
<div id="svar">
<p>Your answer is...</p>
<h4>Blue = odd answer</h4>
<h4>Red = even answer</h4>
<h4>Yellow = your answer is just 0</h4>
</div>
<script>
$(function() {
$('#calculator').click(function() {
var value = $("#dropDown").val();
var number1 = $("#nummer1").val();
var number2 = $("#nummer2").val();
var int1 = parseInt(number1);
var int2 = parseInt(number2);
if (value === "+") $("#svar p").text(int1 + int2);
else if (value === "-") $("#svar p").text(int1 - int2);
else if (value === "/") $("#svar p").text(int1 / int2);
else if (value === "x") $("#svar p").text(int1 * int2);
if (value % 2 == 0)
$("#svar p").css("background-color", "red")
else(value % 2 == 1)
$("#svar p").css("background-color", "blue")
});
});
</script>
</body>
</html>


Just debugged your code a little bit
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
body {
background-color: #0D1112;
}
form {
display: flex;
height: 30px;
gap: 30px;
align-items: center;
justify-content: center;
}
p {
color: white;
}
h1 {
color: white;
text-align: center;
}
#svar {
background-color: #0D1112;
}
h4 {
color: white;
}
</style>
</head>
<body>
<form id="f0rm">
<input name="nummer1" id="nummer1" type="text" size="5">
<select id="dropDown" name="thing" id="dropID" required>
<option>choose</option>
<option value="+">+</option>
<option value="-">-</option>
<option value="x">x</option>
<option value="/">/</option>
</select>
<input name="nummer2" id="nummer2" type="text" size="5"> =
<input type="button" id="calculator" value="Submit">
</form>
<div id="svar">
<p>Your answer is...</p>
<h4>Blue = odd answer</h4>
<h4>Red = even answer</h4>
<h4>Yellow = your answer is just 0</h4>
</div>
<script>
$(function() {
$('#calculator').click(function() {
var value = $("#dropDown").val();
var number1 = $("#nummer1").val();
var number2 = $("#nummer2").val();
var int1 = parseInt(number1);
var int2 = parseInt(number2);
let result = 0;
if (value === "+") result = int1 + int2;
else if (value === "-") result = int1 - int2;
else if (value === "/") result = int1 / int2;
else if (value === "x") result = int1 * int2;
$("#svar p").text(result)
if (result % 2 == 0){
$("#svar p").css("background-color", "red");
} else {
$("#svar p").css("background-color", "blue");
}
});
});
</script>
</body>
</html>

Related

Using eventlistener to disable and enable a button

I have a chess form with six fields. Two are drop down menus to select names (whiteplayername and blackplayername) and the other four can be used to add a custom name instead (firstnamewhite, lastnamewhite, firstnameblack, lastnameblack). Currently, I want my javascript to disable the custom fields if a name has been selected from the drop down menu (this is working). I also want the submit button to be disabled if neither the whiteplayername or firstnamewhite and blackplayername of firstnameblack is selected. Currently, the submit-button becomes enabled if a name is selected from both the blackplayername and whiteplayname menus but then does not become disabled again if an empty field is selected in either.
Edit
The full html is below, though I have taken out a section just made up of text and rows from the table in order to cut down on the space used.
<!DOCTYPE html>
<html lang="en"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>chessopenings3</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
body {
style: "background-color: #FF0000;
}
.topnav {
position: relative;
overflow: hidden;
background-color: #333;
border: 2px;
width: max-content;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
border: 2px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
border: 2px;
}
.formformat {
color: white;
padding: 50px;
font-size: 24px;
font-family: Arial, Helvetica, sans-serif;
}
.instructions-text {
position: absolute;
color: white;
align: center;
left: 750px;
top: 150px;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
.warning {
position: absolute;
color: white;
text-align: left;
left: 150px;
top: 50px;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
select {
width: 120px;
}
select:focus {
min-width: 120px;
width: auto;
}
#media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
}
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
let isformvalid = false;
document.getElementById("submit-button").disabled = !isformvalid;
document.getElementById("whiteplayername").addEventListener("change", function () {
let blackplayername =
document.getElementById("blackplayername");
let firstnameblack =
document.getElementById("firstnameblack");
let firstnamewhite =
document.getElementById("firstnamewhite");
let lastnamewhite =
document.getElementById("lastnamewhite");
let lastnameblack =
document.getElementById("lastnameblack");
disablewhenmandatorynamemissingwhitename(this.value, blackplayername, firstnameblack, firstnamewhite, lastnameblack, lastnamewhite);
isformvalid = checkeitherfirstorfullnamepopulated (this.value, firstnamewhite, blackplayername, firstnameblack, isformvalid);
document.getElementById("submit-button").disabled = !isformvalid;
});
});
function disablewhenmandatorynamemissingwhitename(whiteplayername, blackplayername, firstnameblack, firstnamewhite, lastnameblack, lastnamewhite) {
if (whiteplayername !== "") {
firstnamewhite.disabled = true;
lastnamewhite.disabled = true;
} else {
firstnamewhite.disabled = false;
lastnamewhite.disabled = false;
}
}
function disablewhenmandatorynamemissingblackname(whiteplayername, blackplayername, firstnameblack, firstnamewhite, lastnameblack, lastnamewhite) {
if (blackplayername !== "") {
firstnameblack.disabled = true;
lastnameblack.disabled = true;
} else {
firstnameblack.disabled = false;
lastnameblack.disabled = false;
}
};
function checkeitherfirstorfullnamepopulated(whiteplayername, firstnamewhite, blackplayername, firstnameblack, isformvalid) {
if ((whiteplayername === "" || whiteplayername === null) && (firstnamewhite.trim() === "")) {
return false;
}
else if ((blackplayername === "" || blackplayername === null) && (firstnameblack.trim() === "")) {
return false;
}
return true;
};
</script>
<body style="background-color:rgb(68, 57, 57);">
<div class="warning">
<p id="warningtext"></p><br>
</div>
<div class="topnav">
<a th:href="#{main.html}"><i class="material-icons"
style="border:2px;font-size:60px;color:rgb(0, 0, 0);">arrow_back</i></a>
</div>
<div class="formformat">
<form th:object="${game}" th:action="#{/addgame}" th:method="post">
<label for="whiteplayername">Select white player:</label>
<select name="whiteplayername" id="whiteplayername" th:object="${names}" th:field="${game.whitePlayerName}">
<option th:value="null" th:selected="${game.name == null}"></option>
<th:block th:each="name : ${names}">
<option th:value="${name.name}"
th:text="${name.name}"></option>
</th:block>
</select>
<label for="blackplayername">Select black player:</label>
<select name="blackplayername" id="blackplayername" th:object="${names}" th:field="${game.blackPlayerName}">
<option th:value="null" th:selected="${game.name == null}"></option>
<th:block th:each="name : ${names}">
<option th:value="${name.name}"
th:text="${name.name}"></option>
</th:block>
</select><br><br>
<label for="firstnamewhite">First name white:</label>
<input type="text" id="firstnamewhite" th:field="*{firstNameWhite}"/>
<label for="firstnameblack">First name black:</label>
<input type="text" id="firstnameblack" th:field="*{firstNameBlack}"/><br><br>
<label for="lastnamewhite">Last name white:</label>
<input type="text" id="lastnamewhite" th:field="*{lastNameWhite}"/>
<label for="lastnameblack">Last name black:</label>
<input type="text" id="lastnameblack" th:field="*{lastNameBlack}"/><br><br>
<label for="date">Date:</label><br>
<input type="date" id="date" th:field="*{date}">
<table>
<tr>
<th>Move</th>
<th>White</th>
<th>Black</th>
</tr>
<tr>
<td>1</td>
<td><input type="text" id="white1" th:field="*{moves}"></td>
<td><input type="text" id="black1" th:field="*{moves}"></td>
</tr>
</table>
<input type="submit" value="Submit" id="submit-button">
</form>
</div>
<br><br>
</body>
</html>

Here's a solution that should meet all your requirements:
<script type="module">
const form = document.getElementById("form");
const submitButton = document.getElementById("submitbutton");
const whitePlayerName = document.getElementById("whiteplayername");
const blackPlayerName = document.getElementById("blackplayername");
const firstNameBlack = document.getElementById("firstnameblack");
const firstNameWhite = document.getElementById("firstnamewhite");
const lastNameWhite = document.getElementById("lastnamewhite");
const lastNameBlack = document.getElementById("lastnameblack");
form.addEventListener('change', () => {
const whiteNameSelected = whitePlayerName.value;
// Disable white name inputs if white name is selected in the dropdown
firstNameWhite.disabled = whiteNameSelected;
lastNameWhite.disabled = whiteNameSelected;
// Determine if the white name is either selected or typed in the inputs
const validWhiteName = whiteNameSelected || (firstNameWhite.value && lastNameWhite.value);
const blackNameSelected = blackPlayerName.value;
// Disable black name inputs if black name is selected in the dropdown
firstNameBlack.disabled = blackNameSelected;
lastNameBlack.disabled = blackNameSelected;
// Determine if the black name is either selected or typed in the inputs
const validBlackName = blackNameSelected || (firstNameBlack.value && lastNameBlack.value);
const submitAvailable = validWhiteName && validBlackName;
submitButton.disabled = !submitAvailable;
});
</script>
<form th:object="${game}" th:action="#{/addgame}" th:method="post" id="form">
<label for="whiteplayername">Select white player:</label>
<select name="whiteplayername" id="whiteplayername" th:object="${names}" th:field="${game.whitePlayerName}">
<option th:value="null" th:selected="${game.name == null}"></option>
<option value="name1">Name 1</option>
<option value="name2">Name 2</option>
</select>
<label for="blackplayername">Select black player:</label>
<select name="blackplayername" id="blackplayername" th:object="${names}" th:field="${game.blackPlayerName}">
<option th:value="null" th:selected="${game.name == null}"></option>
<option value="name1">Name 1</option>
<option value="name2">Name 2</option>
</select><br><br>
<label for="firstnamewhite">First name white:</label>
<input type="text" id="firstnamewhite" th:field="*{firstNameWhite}"/>
<label for="firstnameblack">First name black:</label>
<input type="text" id="firstnameblack" th:field="*{firstNameBlack}"/><br><br>
<label for="lastnamewhite">Last name white:</label>
<input type="text" id="lastnamewhite" th:field="*{lastNameWhite}"/>
<label for="lastnameblack">Last name black:</label>
<input type="text" id="lastnameblack" th:field="*{lastNameBlack}"/><br><br>
<label for="date">Date:</label><br>
<input type="date" id="date" th:field="*{date}">
<button id="submitbutton" disabled>Submit</button>
</form>
It works by combining all the logic into a single handler for the entire form change. Then, if a name is selected in the dropdown, it disables the custom name fields, if not, it leaves them enabled. The code checks to make sure both white and black name are valid and depending on that sets the submit button enabled/disabled state.
You didn't post your whole HTML so I added the button by hand and also your selects are populated dynamically so I had to hardcode some options in them. Please, for Stack Overflow questions, always post examples reproducible by other people to aid them in helping you.

Can you provide the html code too? I also recommend to name properly ur variables and fucntions beacuase are pretty illegibles by the way. Try to type the first letter of each word that compunds the varibale in uppercase at least.
Instead of:
let firstnameblack
Do:
let firstNameBlack
I also recommend to put 2 or 3 letters according to what specifies this varibale, for example if it's a button, do:
let btnFirstNameBlack
Anyways if you can provide the html code maybe I can help you with the button issue.

Radio button validation and Selector list validation in jQuery

$(document).ready(function () {
$("#mysubmit").click(function (){
$("#first_name").text("");
$("#last_name").text("");
$("#message").text("");
var myFirst = $("#first_name").val();
var fName = "";
var myLast = $("#last_name").val();
var lName = "";
var radioVal = $("input[name='gender']:checked").val();
var myGender = "";
var years = $("#years option:selected").val();
var myYears = "";
if (myFirst == "")
{
$("#first_error").text("You must Enter a First Name");
$("#first_name").focus();
}
else {
fName += "Employment Stats for " + $("#first_name").val() + " ";
}
if (myFirst !== "" && myLast == "")
{
$("#first_error").text("");
$("#last_error").text("You must Enter a Last Name");
$("#last_name").focus();
}
else {
lName += $("#last_name").val();
}
if (myLast !== "" & radioVal == "")
{
$("#gender_error").text("You must choose a Gender");
return false;
}
else {
console.log(radioVal)
myGender += "You are a: " + radioVal;
}
if (radioVal !== "" && years == "-")
{
$("#years_error").text("You Must enter amount of Years");
}
else {
myYears += $("#years").text("You have: " + years + " years experience");
console.log(years)
}
//yellow textbox for end message after submit
if (myFirst !== "" && myLast !== "" && myGender !== "" && years !== "-")
{
$("#message").css("backgroundColor", "yellow");
$("#message").text(fName + lName + myGender + myYears);
}
})
})
/* type selectors */
article, aside, figure, figcaption, footer, header, nav, section {
display: block;
}
* {
margin: 10;
padding: 10;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
width: 650px;
background-color: silver;
}
h1 {
font-size: 150%;
}
h2 {
font-size: 120%;
padding: .25em 0 .25em 25px;
}
p {
padding-bottom: .25em;
padding-left: 25px;
}
.error {
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Assignment 6</title>
<link rel="stylesheet" href="Assignment_6.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="Assignment_6.js"></script>
</head>
<body>
<div id="top">
<h1>Assignment 6</h1>
<h3>Enter Employment Statistics</h3>
<form>
<br>
<label for="first_name">First Name:</label>
<input type="text" id="first_name" name="first_name" required> <span class="error" id="first_error"></span>
<br>
<label for="last_name">Last Name:</label>
<input type="text" id="last_name" name="last_name" required> <span class="error" id="last_error"></span>
<br>
Male <input type="radio" name="gender" value="M">
Female <input type="radio" name="gender" value="F"> <span class="error" id="gender_error"></span>
<br>
Years Experience:
<select id="years" size="1">
<option value="-">-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<span class="error" id="years_error"></span>
<br><br>
<input type="button" id="mysubmit" value="Submit Form">
<br>
</form>
</div>
<div id="message">
</div>
</body>
</html>
I'm having trouble figuring out form validation using jQuery. I'm supposed to have an error message pop up one by one in the fields if something is not filled out.
For example, if the first name is not filled out, on submit it shows the error message for first name and so forth for the rest.
I'm having issues getting the radio button and the selector list to show an error message and to retrieve the value to then place into my end message. Would anyone be able to assist me with this?
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Assignment 6</title>
<link rel="stylesheet" href="Assignment_6.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="Assignment_6.js"></script>
</head>
<body>
<div id="top">
<h1>Assignment 6</h1>
<h3>Enter Employment Statistics</h3>
<form>
<br>
<label for="first_name">First Name:</label>
<input type="text" id="first_name" name="first_name" required> <span class="error" id="first_error"></span>
<br>
<label for="last_name">Last Name:</label>
<input type="text" id="last_name" name="last_name" required> <span class="error" id="last_error"></span>
<br>
Male <input type="radio" name="gender" value="M">
Female <input type="radio" name="gender" value="F"> <span class="error" id="gender_error"></span>
<br>
Years Experience:
<select id="years" size="1">
<option value="-">-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<span class="error" id="years_error"></span>
<br><br>
<input type="button" id="mysubmit" value="Submit Form">
<br>
</form>
</div>
<div id="message">
</div>
</body>
</html>
js:
$(document).ready(function () {
$("#mysubmit").click(function (){
$("#first_name").text("");
$("#last_name").text("");
$("#message").text("");
var myFirst = $("#first_name").val();
var fName = "";
var myLast = $("#last_name").val();
var lName = "";
var radioVal = $("input[name='gender']:checked").val();
var myGender = "";
var years = $("#years option:selected").val();
var myYears = "";
if (myFirst == "")
{
$("#first_error").text("You must Enter a First Name");
$("#first_name").focus();
}
else {
fName += "Employment Stats for " + $("#first_name").val() + " ";
}
if (myFirst !== "" && myLast == "")
{
$("#first_error").text("");
$("#last_error").text("You must Enter a Last Name");
$("#last_name").focus();
}
else {
lName += $("#last_name").val();
}
if (myLast !== "" & radioVal == "")
{
$("#gender_error").text("You must choose a Gender");
return false;
}
else {
console.log(radioVal)
myGender += "You are a: " + radioVal;
}
if (radioVal !== "" && years == "-")
{
$("#years_error").text("You Must enter amount of Years");
}
else {
myYears += $("#years").text("You have: " + years + " years experience");
console.log(years)
}
//yellow textbox for end message after submit
if (myFirst !== "" && myLast !== "" && myGender !== "" && years !== "-")
{
$("#message").css("backgroundColor", "yellow");
$("#message").text(fName + lName + myGender + myYears);
}
})
})
css:
/* type selectors */
article, aside, figure, figcaption, footer, header, nav, section {
display: block;
}
* {
margin: 10;
padding: 10;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
width: 650px;
background-color: silver;
}
h1 {
font-size: 150%;
}
h2 {
font-size: 120%;
padding: .25em 0 .25em 25px;
}
p {
padding-bottom: .25em;
padding-left: 25px;
}
.error {
color: red;
}

The issue is you're testing for a blank value, when what is actually getting returned is undefined. That is because you're asking for the value of something that doesn't yet exist - in this case, a selected radio button.
When no radio button is selected, there is no value for
var radioVal = $("input[name='gender']:checked").val(); and so it's undefined.
I see you have a variable ready, but it's testing the wrong thing, here is my suggested change:
var radioVal = $("input[name='gender']:checked");
// this creates an array of elements
var genderIsSelected = radioVal.length > 0;
// if that array has something in it, the gender was selected
var myGender = genderIsSelected ? radioVal[0].val() : '';
// populate myGender with the actual value, or blank
The same error is happening for your select menu validation.

Adding a default number to JavaScript [duplicate]

This question already has answers here:
Convert NaN to 0 in JavaScript
(11 answers)
Closed 2 years ago.
I have a program I am working on that is supposed to be a makeshift discount calculator. I keep getting NaN when I try to make the program run without any input. I would like to add in a line of code that makes zero the default instead of Nan. I'm not sure what to do and any help would be appreciated!
"use strict";
var $ = function(id) { return document.getElementById(id); };
var calculateDiscountPercent = function(customerType, invoiceSubtotal) {
var discountPercent = 0;
if (customerType === "r") {
if (invoiceSubtotal < 100) {
discountPercent = .0;
} else if (invoiceSubtotal >= 100 && invoiceSubtotal < 250) {
discountPercent = .1;
} else if (invoiceSubtotal >= 250 && invoiceSubtotal < 500) {
discountPercent = .25;
} else if (invoiceSubtotal >= 500) {
discountPercent = .3;
}
} else if (customerType === "l") {
discountPercent = .3;
} else if (customerType === "h") {
if (invoiceSubtotal < 500) {
discountPercent = .4;
} else if (invoiceSubtotal >= 500) {
discountPercent = .5;
}
}
return discountPercent;
};
var processEntries = function() {
var discountAmount;
var invoiceTotal;
var discountPercent;
//get values from page, reset subtotal to 2 decimals
var customerType = $("type").value;
var invoiceSubtotal = parseFloat( $("subtotal").value );
$("subtotal").value = invoiceSubtotal.toFixed(2);
//call function to get discount percent
discountPercent = calculateDiscountPercent(customerType, invoiceSubtotal);
//calculate and display discount percent, amount, and new total
discountAmount = invoiceSubtotal * discountPercent;
invoiceTotal = invoiceSubtotal - discountAmount;
$("percent").value = (discountPercent * 100).toFixed(2) ;
$("discount").value = discountAmount.toFixed(2);
$("total").value = invoiceTotal.toFixed(2);
$("type").focus;
};
window.onload = function() {
$("calculate").onclick = processEntries;
$("type").focus();
};
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
background-color: white;
width: 500px;
margin: 0 auto;
border: 3px solid blue;
padding: 0 2em 1em;
}
h1 {
font-size: 150%;
color: blue;
margin-bottom: .5em;
}
label {
float: left;
width: 10em;
}
input, select {
width: 12em;
margin-left: 1em;
margin-bottom: .5em;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Invoice Total Calculator</title>
<link rel="stylesheet" type="text/css" href="invoice_total.css">
<script type="text/javascript" src="invoice_total.js"></script>
</head>
<body>
<main>
<h1>Invoice Total Calculator</h1>
<p>Enter the two values that follow and click "Calculate".</p>
<label for="type">Customer Type:</label>
<select id="type">
<option value="r">Regular</option>
<option value="l">Loyalty Program</option>
<option value="h">Honored Citizen</option>
</select>
<br>
<label for="subtotal">Invoice Subtotal:</label>
<input type="text" id="subtotal" /><br>
----------------------------------------------------------------<br>
<label for="percent">Discount Percent:</label>
<input type="text" id="percent" disabled />%<br>
<label for="discount">Discount Amount:</label>
<input type="text" id="discount" disabled /><br>
<label for="total">Invoice Total:</label>
<input type="text" id="total" disabled /><br>
<label> </label>
<input type="button" id="calculate" value="Calculate" />
</main>
</body>
</html>

Do this
var invoiceSubtotal = parseFloat( $("subtotal").value ) || 0 ;

Create simple text editor (javascript)

I would like to create a simple text editor in Javascript. The challenge for me is: the buttons above my text-editor should be adjusted on the content of the DOM. For example: if the cursor is within a 'ul'-tag in my text-editor, only button 'li' should be displayed.
I already created a 'content-editable div', but I don't know where to look next. Can someone help me with some ideas? If I can do this with help of an existing JS-text-editor, please say.
<html>
<head>
<style>
#textEditor {
border: 1px solid black; display:block; width: 300px; height: 200px;
}
</style>
<script>
var options = ['ul','div'];
var subOptions = {
'ul':['li'],
'div':['div','span', 'p']
};
</script>
</head>
<body>
<div id="textEditor" contenteditable="true"></div>
</body>
</html>

I Create a simple & rich text editor using the only javascript. Especially I create this for my powerBI custom visual. You can use it in any project.
function chooseColor(){
var mycolor = document.getElementById("myColor").value;
document.execCommand('foreColor', false, mycolor);
}
function changeFont(){
var myFont = document.getElementById("input-font").value;
document.execCommand('fontName', false, myFont);
}
function changeSize(){
var mysize = document.getElementById("fontSize").value;
document.execCommand('fontSize', false, mysize);
}
function checkDiv(){
var editorText = document.getElementById("editor1").innerHTML;
if(editorText === ''){
document.getElementById("editor1").style.border = '5px solid red';
}
}
function removeBorder(){
document.getElementById("editor1").style.border = '1px solid transparent';
}
body {
font: 400 16px/1.4 'serif';
}
#container #containerHeader{
text-align: center;
cursor:move;
}
#container #editor1 {
border: 1px solid grey;
height: 100px;
width: 602px;
margin: 0px auto 0;
padding:10px;
}
#container fieldset {
margin: 2px auto 0px;
width: 600px;
height:26px;
background-color: #f2f2f2;
border:none;
}
#container button {
width: 5ex;
text-align: center;
padding: 1px 3px;
height:30px;
width:30px;
background-repeat: no-repeat;
background-size: cover;
border:none;
}
#container img{
width:100%;
}
#container .bold{
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAuIwAALiMBeKU/dgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAJmSURBVHic7drPi05RHMfx18igGaaJzbAQShby22ZYKBb+CKyMJTsryo/IQigWUjbKnoWVpJSy8TOpIckCC0Xj1zTKGItLWcyZnmbuuY/z+L7rbO73PN/P93y65z73nHsIgiAIgiAIgiAIgiAIgiD43+lqSGc+1qB3Gr/9gfd4h5E6i/oX2YdRTNTQnuA4Fjc6gobYqLoz6jDq7/YVxzC7uaHk57D6jfq73cLCpgYzK3P+RZnz78ANzM2sg/xmNcEgLjQh1AlmwRA25RZpl1nXVa8trbYB7MbLRL4uHMlbcn7OmfzBfG2a+frxKJHzO/pmWO+UlDYNR1RTbjLmYHtO8dLMggd4nogtyylcolnwKnF9IKdoqWb1J65/yilaolkLsSERe5tTuESzjmJeInY3p3BJZvXgDPYn4k+ln2W10K5V+3pcarFvN5ZgCxZM0e/sTItqN6mX0rrbYw3MkpKmYYrP2IWfuYU6wayTeNaEUCeYdQhrmxDqBLP6cFW1NsxKu/4NX+Nmi327VcuYrdK7CmuwFxdnXFkbqXOLpgenE/km8KKGeqekpGk4ioM4n4ivxOqcBZRk1h+OYSwRG8wpXKJZH1W7pZOxPKdwiWaR/ozfnVO0VLNWJK5/ySlaolmbsSoRG84pXJpZ/biciI3jTk7xEszqUp2a2YP7WJfod1t1NKlYmtqimcC23IMp4c5qhSsyT0E6w6yHONCEUG6zPmTOfw87VRuAxZPr5N8YTmlgW6ZphvBNPSYN4wSWNjqC3zR1WrlXtZs5ndPK46rp/Ea1LgyCIAiCIAiCIAiCIAiCIAjaxi96FfJoiZEgRAAAAABJRU5ErkJggg==');
}
#container .italic{
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAuIwAALiMBeKU/dgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAGDSURBVHic7do7SgRBFEbh0z5BwUhQTMxEMDAXQ1EXIS7AHehWBBMznQ0YizsQJhBfiIGB4Rjo4BiMRnZD11BV3eL5oNJbdS/VfyUNkiRJkiRJkvTfFU0f4Ns8sAZMRqr3AnSBfqR6rTABnACDBOsZ2MjXSnoHpBnUz3oApmIddixWoRFtJ66/DKzGKtb0sN4y7NHLsEcWW6T9DK9ozyMWxT5wC3wSb0g94BxYyNhHoxaBd8qH0WnwXK10RPXNSf0w/CkFcEP5oO5o/mFqlR2qb9Vhg+dqpQ7lg/oAlho8V+sY7AEM9poM9gAGewCDvSaDPYDBXpPBHsBgD2Cw12SwBzDYazLYAxjsAQz2mgz2AAZ7TQZ7AIM9gMHOMLTPgFeqb07o6gPXwF7GPpIrgEviDals7WbrJrEV0g5qAJxm66ZEzFdnJmKtKrMZ9qgUc1hd4ClivTIXietntcnwX84Un+AxMJ6vld9S/Og1DawDc5Hq9YF74DFSPUmSJEmSJEnSyL4AJ3NtCSNV9DYAAAAASUVORK5CYII=');
}
#container .underline{
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAuIwAALiMBeKU/dgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAJhSURBVHic7drNahNRGMbxfw1WLBaiVtSioLiQrHSpWxERxAvQCxDcqjdRRBBX4qbriis3ikLxAhR3UhRcKC3FD6wgtmJ1XJwUnGTONCd5z5yZ8PzgUEjI+57zdD6SmQERERERERERkaaZAuaAd90x132taT0qMQ9kPWO+gT2i2wls0L+QTWBPg3rk7IhRFJgFdhW83gL2N6hHTqywJoZ8r249cmKFNZYUVgCFFUBhBVBYARRWAIUVQGEFUFgBFFYAhRVAYQVQWAEUVoBYYW2UvLfXqEfZNaufRj1yYoW1hrtqWeSIUQ9fnb/Ad6MeOTG3rI+e984Z9fDV+QD8MupRmUf0Xx/PcIuZHLH2JO6fUVR/YcTaXjEP8M88rx8Fro1Y+zr+3dDXt9b2UXz3JQO+ASeHrNvBHZOK6q5jdwKp3D2KF5UBb4FjgfWO426m+mretZh0KgfwbwUZ8Am4NGCty8DnklprwIzh3JO4hX+BW2MRuAK0ez7bBq4CLwaocSPuMqoxATxk+8VujVXgTffvoJ9ZINK9whSmgFcMvviQ8ZKGPgxSZhp4jG1QT+nfdcdGC7gN/GG0kDZxjxe1qp1+Gh3CjmP/j+fAqeqnnN5Z4AGwTHlAy8B94EyaaTp1OoOcwH2rn8U9e/UbWAGWgPcJ5yUiIuMuxtlwGjgNHIpQe1CrwGvgR8I5bOsC8JU4vwFDxxfgfNzlDm83YVcKqhgrFD/+PRTLa/Ad4KBhPQuHcfMyYRlWlHt1Buo6LxZJv+v1/ug2Y302bAN3gIu4Y1gq68AT4CY13rJERERERERERJx/gYhfcxk8X00AAAAASUVORK5CYII=');
}
#container .align-left{
background-image : url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAA1CAAAAAAsDUmHAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAACYktHRAAAqo0jMgAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+MIHAYHAD13ih8AAAIrSURBVEjHzZaxTxRBFMa/N7OH0FJqSwnChsTYnomKnJUKFOo1JrbGwpBYmwCV0X9AvMRK1IJ4OTtjYyCQ44xWtNpaa9x5z+IIt7vHbGYeV3DlJvfLm2++b76XCEb2S3DGWeJIRxBLJZboJxShAkvo94uuajBJH00ewZIj1J8bu4Y1LLPd/jLRh/VZLtnaPacTjGp7b5suyev1C5zp5CL8LGhPuASnFJ9xGXm9rNRXN0QVAZInV8Tm75FkfeWHSi+eTkueAHGaKv3Fpux7w6xDGTOcx8G3EeQx5m+WKlgiUZZgkJ9Ff9/sB9+jzN8dF/KwhOR2OzyPhrc+mmFYn8X2fXuMw8VPOu+W2HrmwmFUHhMcQjxnJMyAasEZIuAifHpZaTRbMXrduwnru0fCq5WDYL14bqHKq4LFxRh/SZW/yEU8OWQrMwR72jjmWE65DQxmHORRPRdT+S2UT10dKr1a6m2hB5vKfuTm60LXOtveTEj1GJJpLTeczefxG/BPe3u9hhTyOAWj7EeDqUI/Gtxa6Cj1yq7dgcnPJeZDq6vSi9P7pqA9SMYeqv011LXItKyhvRB0+s11QIjp7ZN7+ZjFUb19Ys8cZ9v0voejpmcr3kKhp2sU3h2yuu7tWmc/r8WckTeu1523H3dgI/JY46918ep1HiYJP6PBBa/2Fksv9yL6MZtf9vYjyXjneS+8H2cfT3i1B8nksxiLS2U/ShaxRkvlXjjaPOJMsf4DQ22vjD/V/uUAAAAASUVORK5CYII=');
width:40px;
}
#container .align-right{
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAA1CAAAAAAsDUmHAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAACYktHRAAAqo0jMgAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+MIHAYOC3tn6N4AAAIsSURBVEjHzZexaxRBFMa/NzMXkzaltimjcQmI7QlqzFmpSQr1GsFWLCRgLSSpRP8B44GViRYhx9mJjRgi54lWabW1VtyZZ5GAM7uZZeYlRbbchY8337zf+94axrE9Bidciy3JFFhTRYvlFTJToMX069lQVBgXDyYPxMyB1O9rO8pJtNRW/8PEvti+ljUbO6dkhlFr93XXGt+vn3ClzC7Cj8B7wgVYofkOF+H7pbm9vMYiBIgfXWLt3yPx6tJ3kV9uuqj0BMgVhbC/nKr2vXJOJqVUncf/746VbbY5EjUeQ8Cy2sOB4lr059Xn5Dvl2dvjAY/BR+Kb/XQ2ldvYVj6PQcn6TX/MpV+EGWwuOB2pC3tZbBrsgSNnJJwFtZJ5IuAcYn5p7nR7OX7duQ4du0fCi6UvyX6583NNvcqYn8/pL27qL7IZ44d0I0PQR+TRCreBel3MsloAOKrOQn43lEkVlytzguneujAfXfdlwLbV/XVDomFIqrfYsR6PjK/AX9kZDUYdn0fCFJQwHxWmAh4VbswNhH6VV25B+XWxetsbivxyxV0VzlXisfvi/qplLUqpVj2H6Oib6+EKORl+WG77UlkZXt8nvIfV6Fu61PRMwyxkerxC6dnBy6vRrLX6/UrOGd3a1baN5uMn6Aw2W+5jm6N+nYYy6WdUOBP1XmPh+W5GPpazi9F8JB4fPB2l5+PMw4mo9yCefJLT7tyYj1xmrNTcuBdK2Typ/7X/ACjdr4z8YnCHAAAAAElFTkSuQmCC');
width:40px;
}
#container .align-center{
width: 38px;
background-size: contain;
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAABGdBTUEAALGPC/xhBQAAADRJREFUOBFjYGBg2ArE/6mEtzIBDaImADlsCAJSwhSkFgVQGoYjIMwIpdfRdAhJUYMrHQIAWPdBdW2q70gAAAAASUVORK5CYII=');
}
#container .redo-apply{
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAuIwAALiMBeKU/dgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAKJSURBVHic7du7axRRGIbxn260MELQIoIIFjYBa01lI0btFVEQRBtbSeEFUmhnbeEfoOK1EkQQKxsLUbH00gQLxesuRBANMRZrIJHd2T3jzsyOfA98zdnZc9555sxyZnaGIAiCIAjqw2HcwTXsrjjLUHMBi8vqF85UmmhIWY95K2Ut1dkKcw0lEzqLCmEdWINPQljfHMCCENY3x/UWNlNZuiEkhCUSwhIJYYmEsERCWCIhLJFShK361w56MIot2IS1BY91DEd7bHMOFwvOkcQmnMZjvY92FTVd3K73zyjOY071QrLqJ7YXo6A/tuKF6kX0W6fy7ORIni/9xQQeYXwAfZVFq4pBN+C16mdKSr37k7t0bucIW2W1MFmIiR5Mat8LzzqC09iGRsFZRrT/zOglamfBObpyLyPYA4yVlKMfUU0VihrDjy7BnmNdSTmGXhQc6hBqqXaVlKFfUTtKytOVGZ3DvSlp/NqIgss6B7xVwtgNXO8yfqE/5nkXpd3WKc28QfpkBDdwMGObJvbi6aAHXz3g/hYH3N9yGrgiW1QL+xUgisHLKooGruJIxjYt7MOTokIM4tqwDC7JFtXEFJ4VGaIOM2scJzM+L0UU9ZhZ47pfLjWxR3shXDh1mFmv8KFD+1cliqIesuZxAt+Xtc0qWRT1OA3hvvbdiynt29YP8a3sEHWRBe+111mVUYfTcGgIWQmErARCVgIhK4GQlUDISiBkJRCyEghZCYSsBEJWAiErgZCVQMhKIGQlELISCFkJhKwEQlYCISuBkJVAXlkLXdqLfOSocvLKetmlfTZnf/81m/HRykcT32JjlaGKJu/D/HO4qf2+4hfc1X5B8vOAcgVBEARBMJT8BsNk0YqzYcGdAAAAAElFTkSuQmCC');
}
#container .undo-apply{
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAuIwAALiMBeKU/dgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAALFSURBVHic7ZzPi05RGMc/M0aSJDZMUXaSlB3T+DGkWCgW2Cn+AYVsSBo/xm78LpoihcmUlIXyIxbWYolSQ7IgeY0fM2Te1+JsmO499zz3fZ97jvF86mxuvef53k/nvfe8z729YBiGYRhGHLYCQ8A1YEPkLMnSBpwDGhPGrpihUiRPVAN4FzFXcrQBZ8gW1QDqwPRo6RLjFPmiGsDTeNHSoh+/qFGgK1q6hOjDL+oHsClauoQ4jokK4hgmKoijmKggjmCigujFRAVxGBMVxH7+E1EdTX7+AG6L4OMsMAasb7JWFp+AYeCjwtwtZS/+FVXleA1cBjYC7ZonXYYlwE/iS8oaL4EduB/vSbCH+FKKxmNgYStPuuyS/dzKEEqsxHUz1sYOMhvXsIu9ekLGGO5aFpXlQI34MkLGV2CZjoZwVuC+kr6gQzS/RcliKrAA2A7cAH4V5HgBzFDIIaKLYmGDwBTlHIuBRwU5+pQzBNENjOAPehV9YR3ARU+G78Bc5QxBdANf8Au7gv6msR245cnQq1w/mFUUC7uEvrBZwIec+q+Ua4tYjbv7+IQNoL/D3uepv0i5tog1FAu7gK6wecB4Tu3knoD3AN/wCzuPrrAnOXVPKNYsTcg17DR6wm7m1BxQqtc06yheYQeVaudtIwbLTFZF7+chsBn35DmPQ7g7WKupt3KyqhplD/ALmwbMryhLaarsKt4HtuC6ABMZIbH9TxZVt2Dv4YTV/jhWB3aTLTEpNLoBRdwFlgLbgJnAbeBZhBxiYsgCeAucjFS7NMk9CUkZkyXAZAkwWQJMlgCTJcBkCTBZAkyWAJMlwGQJMFkCTJYAkyXAZAkwWQJMlgCTJcBkCTBZAkyWAJMlYLLLGs853igz2WSX9Tzn+HCVIf4V5gBv+Pt1o/dAZ5nJtF+1js0ocB0nqQbcAXZi/31jGIZhGCX5DTQy/pTFeqp6AAAAAElFTkSuQmCC');
}
#container .unorderedlist{
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAuIwAALiMBeKU/dgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAI0SURBVHic7dq7axRBGADw30UloEaICAbBQoVgwEcvKWx8gEh6sUqhf4jYaauFVtFGwUK00MrOR2ER8ZFCFBUj+ERFET2NxSgiZHbv9kJul3w/+JrZb4eZ79i527khhBBCCCGEEEIIIYQQlrpWBzkbMIIZfO0gfznGsL6HcS22H3iAt1U7aOEUfmIOH3Co5J5xzP7Jb2KcxbIu6wQOz9PZN2zJ5A/ieQ0m3GsczRVkoKBYE5mC7M/kj2FjQX9NsS93oahYnzPtnzLtnaxnTfClyk27/Fuv/sYrDGfyW7ipP4/OQsaeKsUiPYrT+Igb2FmSP4JL0qfT70l3E7/wWFqnQwghhBBCqK+y/awhHMEo7mAK7ZJ7DmA31vQ6uEU0J/2Cn8LrKh2sxVP/vxZcUVzgYxb/VWUhY1ba7Oza8UyHuRfNdfhegwn3GidyBSnaotmRad+ead+MFQX9NcXW3IWiYk1n2u9l2p9Ie9lNN1PlpvnWrMuW8JrVybfhpPSI3cYFae+nyEFpa7Zpj+RLnMabfg8khBBCCCGEyiZwF+9xDdtK8kdwEe/0/9Wlm2jjvh7+ka5y1uFWDSbea+ytUqzzmc4mM/mjNZjoQsS5XEGKtmiGMu2rM+0rC/pqklW5C0XFujpPWxvXM/mP8KKLQdVVbn6FBnBSKtCcdKa0bAEcl7Y6+v0oVY0zCs6UdnJaeRib8FA6U1pmUDrH1aR/d9rSRuezfg8khBBCCCGEEEIIIYQQ6u03kq1rwGv96WIAAAAASUVORK5CYII=');
}
#container .orderedlist{
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAuIwAALiMBeKU/dgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAJDSURBVHic7dq9TxRBGMfx7x2KQfSQzhCICRgSk9OKBgobwY6KhARLC/4CaioKqAQLGwtfao0k0BITNbGSoFEIEBrsjAQTCETepJi7gMfOvrl7Oye/TzLNZGb3mefYJfPsgIiIiIiIiIiIiMh5lws57gJQBLaAtZBzmoHbQH2MuLLyE/gG7Me9QBFYBf6U2nvgus/4HPAYODo1p5baD6A3Rp7IAV89LvjaZ84DBxacRMKuRE3WTcvFdjGPppfnDiw2iXa3cmH5gGTtlCZWOsA8ZrY5/4NY65jmbNYf+YzvpnbfV+X2GaiLniooAE+BX5hneRz7I1g2ACwDhw4sPErbBWaAtqhJEhERERGpirD1rKiuAQ+BdmAeeInZT/q5B9wvzc3KNvABeFOtGzYDK/y9jZjDf681QjbbG1ub/McchDZqCWDQMr6Bk+qGK+0QuFEZaFCJJo6ipf+Opb8NkzCX5IFOr86kLVr6lyz93zG7fZccYaomqWvCJOb0n/U7/D9c1MQ7K63/hgVgGFOW/gS8APYC5vQB/cCllGIK4wB4C7zKMAYREREREfcVgGfAJrAOjBF8rmsAWMDsDJLa5mxijis4/UV6hrOBT/iM7yHd8xRfCD6ikIkWvAPewL53fWKZk2TrqrxpGiWaqBot/Vex/7qXU4ql2veIzHa6cNZnzpDH+CRbrJN/1XILU2wrB/uR4HOrU6Tz3rKeKU2rnhVHHlOS/s3JB48grUAHcDGhGLYxB9lcq9yKiIiIiIiIiIiIOOIYaxc11Cpvh4UAAAAASUVORK5CYII=');
}
#container .strikethrough{
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAQAAACROWYpAAAAAmJLR0QA/4ePzL8AAABFSURBVEjHY2AY2eAww38i4GHsmv8TCXFqxmYYPjVIzj5MUPNhXM7G5Q2ywKhm2mo+TG7ipFjzYAGjiYTs8uwwHTUPZwAAW5aYHd3noZcAAAAASUVORK5CYII=');
}
#container .color-apply{
width: 20px;
}
#container #input-font{
width: 100px;
height: 25px;
}
[contentEditable=true]:empty:not(:focus):before{
content:attr(data-text);
color:#888;
}
#container .loader {
border: 6px solid #f3f3f3;
border-top: 6px solid #3498db;
border-radius: 50%;
width: 20px;
height: 20px;
animation: spin 2s linear infinite;
margin: 0 auto;
line-height: 20px;
}
/* #keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
} */
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<script type="text/javascript" src="custom-text-editor.js"></script>
<link type="text/css" rel="stylesheet" href="custom-text-editor.css"/>
</head>
<body>
<div id="container" >
<fieldset>
<button class="fontStyle italic" onclick="document.execCommand('italic',false,null);" title="Italicize Highlighted Text"></button>
<button class="fontStyle bold" onclick="document.execCommand( 'bold',false,null);" title="Bold Highlighted Text"></button>
<button class="fontStyle underline" onclick="document.execCommand( 'underline',false,null);"></button>
<select id="input-font" class="input" onchange="changeFont (this);">
<option value="Arial">Arial</option>
<option value="Helvetica">Helvetica</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Sans serif">Sans serif</option>
<option value="Courier New">Courier New</option>
<option value="Verdana">Verdana</option>
<option value="Georgia">Georgia</option>
<option value="Palatino">Palatino</option>
<option value="Garamond">Garamond</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Arial Black">Arial Black</option>
<option value="Tahoma">Tahoma</option>
<option value="Comic Sans MS">Comic Sans MS</option>
</select>
<button class="fontStyle strikethrough" onclick="document.execCommand( 'strikethrough',false,null);"><strikethrough></strikethrough></button>
<button class="fontStyle align-left" onclick="document.execCommand( 'justifyLeft',false,null);"><justifyLeft></justifyLeft></button>
<button class="fontStyle align-center" onclick="document.execCommand( 'justifyCenter',false,null);"><justifyCenter></justifyCenter></button>
<button class="fontStyle align-right" onclick="document.execCommand( 'justifyRight',false,null);"><justifyRight></justifyRight></button>
<button class="fontStyle redo-apply" onclick="document.execCommand( 'redo',false,null);"><redo></redo></button>
<button class="fontStyle undo-apply" onclick="document.execCommand( 'undo',false,null);"><undo></undo></button>
<button class="fontStyle orderedlist" onclick="document.execCommand('insertOrderedList', false, null);"><insertOrderedList></insertOrderedList></button>
<button class="fontStyle unorderedlist" onclick="document.execCommand('insertUnorderedList',false, null)"><insertUnorderedList></insertUnorderedList></button>
<input class="color-apply" type="color" onchange="chooseColor()" id="myColor">
<!-- font size start -->
<select id="fontSize" onclick="changeSize()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<!-- font size end -->
</fieldset>
<div id="editor1" contenteditable="true" data-text="Enter comment...."></div>
</div>
</body>
</html>

You can make a contenteditable html element so the user can edit it.
<div id="myDiv" contenteditable = "true" style = "border: 1px solid black">
<!DOCTYPE html><br>
<html><br>
<head><br>
<br>
<br>
</head><br>
<body><br>
<br>
<br>
</body><br>
</html>
</div>
<script>
w3CodeColor(document.getElementById("myDiv"));
function w3CodeColor(elmnt, mode) {
var lang = (mode || "html");
var elmntObj = (document.getElementById(elmnt) || elmnt);
var elmntTxt = elmntObj.innerHTML;
var tagcolor = "mediumblue";
var tagnamecolor = "brown";
var attributecolor = "red";
var attributevaluecolor = "mediumblue";
var commentcolor = "green";
var cssselectorcolor = "brown";
var csspropertycolor = "red";
var csspropertyvaluecolor = "mediumblue";
var cssdelimitercolor = "black";
var cssimportantcolor = "red";
var jscolor = "black";
var jskeywordcolor = "mediumblue";
var jsstringcolor = "brown";
var jsnumbercolor = "red";
var jspropertycolor = "black";
elmntObj.style.fontFamily = "Consolas,'Courier New', monospace";
if (!lang) {lang = "html"; }
if (lang == "html") {elmntTxt = htmlMode(elmntTxt);}
if (lang == "css") {elmntTxt = cssMode(elmntTxt);}
if (lang == "js") {elmntTxt = jsMode(elmntTxt);}
elmntObj.innerHTML = elmntTxt;
function extract(str, start, end, func, repl) {
var s, e, d = "", a = [];
while (str.search(start) > -1) {
s = str.search(start);
e = str.indexOf(end, s);
if (e == -1) {e = str.length;}
if (repl) {
a.push(func(str.substring(s, e + (end.length))));
str = str.substring(0, s) + repl + str.substr(e + (end.length));
} else {
d += str.substring(0, s);
d += func(str.substring(s, e + (end.length)));
str = str.substr(e + (end.length));
}
}
this.rest = d + str;
this.arr = a;
}
function htmlMode(txt) {
var rest = txt, done = "", php, comment, angular, startpos, endpos, note, i;
comment = new extract(rest, "<!--", "-->", commentMode, "W3HTMLCOMMENTPOS");
rest = comment.rest;
while (rest.indexOf("<") > -1) {
note = "";
startpos = rest.indexOf("<");
if (rest.substr(startpos, 9).toUpperCase() == "&LT;STYLE") {note = "css";}
if (rest.substr(startpos, 10).toUpperCase() == "&LT;SCRIPT") {note = "javascript";}
endpos = rest.indexOf(">", startpos);
if (endpos == -1) {endpos = rest.length;}
done += rest.substring(0, startpos);
done += tagMode(rest.substring(startpos, endpos + 4));
rest = rest.substr(endpos + 4);
if (note == "css") {
endpos = rest.indexOf("</style>");
if (endpos > -1) {
done += cssMode(rest.substring(0, endpos));
rest = rest.substr(endpos);
}
}
if (note == "javascript") {
endpos = rest.indexOf("</script>");
if (endpos > -1) {
done += jsMode(rest.substring(0, endpos));
rest = rest.substr(endpos);
}
}
}
rest = done + rest;
for (i = 0; i < comment.arr.length; i++) {
rest = rest.replace("W3HTMLCOMMENTPOS", comment.arr[i]);
}
return rest;
}
function tagMode(txt) {
var rest = txt, done = "", startpos, endpos, result;
while (rest.search(/(\s|<br>)/) > -1) {
startpos = rest.search(/(\s|<br>)/);
endpos = rest.indexOf(">");
if (endpos == -1) {endpos = rest.length;}
done += rest.substring(0, startpos);
done += attributeMode(rest.substring(startpos, endpos));
rest = rest.substr(endpos);
}
result = done + rest;
result = "<span style=color:" + tagcolor + "><</span>" + result.substring(4);
if (result.substr(result.length - 4, 4) == ">") {
result = result.substring(0, result.length - 4) + "<span style=color:" + tagcolor + ">></span>";
}
return "<span style=color:" + tagnamecolor + ">" + result + "</span>";
}
function attributeMode(txt) {
var rest = txt, done = "", startpos, endpos, singlefnuttpos, doublefnuttpos, spacepos;
while (rest.indexOf("=") > -1) {
endpos = -1;
startpos = rest.indexOf("=");
singlefnuttpos = rest.indexOf("'", startpos);
doublefnuttpos = rest.indexOf('"', startpos);
spacepos = rest.indexOf(" ", startpos + 2);
if (spacepos > -1 && (spacepos < singlefnuttpos || singlefnuttpos == -1) && (spacepos < doublefnuttpos || doublefnuttpos == -1)) {
endpos = rest.indexOf(" ", startpos);
} else if (doublefnuttpos > -1 && (doublefnuttpos < singlefnuttpos || singlefnuttpos == -1) && (doublefnuttpos < spacepos || spacepos == -1)) {
endpos = rest.indexOf('"', rest.indexOf('"', startpos) + 1);
} else if (singlefnuttpos > -1 && (singlefnuttpos < doublefnuttpos || doublefnuttpos == -1) && (singlefnuttpos < spacepos || spacepos == -1)) {
endpos = rest.indexOf("'", rest.indexOf("'", startpos) + 1);
}
if (!endpos || endpos == -1 || endpos < startpos) {endpos = rest.length;}
done += rest.substring(0, startpos);
done += attributeValueMode(rest.substring(startpos, endpos + 1));
rest = rest.substr(endpos + 1);
}
return "<span style=color:" + attributecolor + ">" + done + rest + "</span>";
}
function attributeValueMode(txt) {
return "<span style=color:" + attributevaluecolor + ">" + txt + "</span>";
}
function commentMode(txt) {
return "<span style=color:" + commentcolor + ">" + txt + "</span>";
}
function cssMode(txt) {
var rest = txt, done = "", s, e, comment, i, midz, c, cc;
comment = new extract(rest, /\/\*/, "*/", commentMode, "W3CSSCOMMENTPOS");
rest = comment.rest;
while (rest.search("{") > -1) {
s = rest.search("{");
midz = rest.substr(s + 1);
cc = 1;
c = 0;
for (i = 0; i < midz.length; i++) {
if (midz.substr(i, 1) == "{") {cc++; c++}
if (midz.substr(i, 1) == "}") {cc--;}
if (cc == 0) {break;}
}
if (cc != 0) {c = 0;}
e = s;
for (i = 0; i <= c; i++) {
e = rest.indexOf("}", e + 1);
}
if (e == -1) {e = rest.length;}
done += rest.substring(0, s + 1);
done += cssPropertyMode(rest.substring(s + 1, e));
rest = rest.substr(e);
}
rest = done + rest;
rest = rest.replace(/{/g, "<span style=color:" + cssdelimitercolor + ">{</span>");
rest = rest.replace(/}/g, "<span style=color:" + cssdelimitercolor + ">}</span>");
for (i = 0; i < comment.arr.length; i++) {
rest = rest.replace("W3CSSCOMMENTPOS", comment.arr[i]);
}
return "<span style=color:" + cssselectorcolor + ">" + rest + "</span>";
}
function cssPropertyMode(txt) {
var rest = txt, done = "", s, e, n, loop;
if (rest.indexOf("{") > -1 ) { return cssMode(rest); }
while (rest.search(":") > -1) {
s = rest.search(":");
loop = true;
n = s;
while (loop == true) {
loop = false;
e = rest.indexOf(";", n);
if (rest.substring(e - 5, e + 1) == " ") {
loop = true;
n = e + 1;
}
}
if (e == -1) {e = rest.length;}
done += rest.substring(0, s);
done += cssPropertyValueMode(rest.substring(s, e + 1));
rest = rest.substr(e + 1);
}
return "<span style=color:" + csspropertycolor + ">" + done + rest + "</span>";
}
function cssPropertyValueMode(txt) {
var rest = txt, done = "", s;
rest = "<span style=color:" + cssdelimitercolor + ">:</span>" + rest.substring(1);
while (rest.search(/!important/i) > -1) {
s = rest.search(/!important/i);
done += rest.substring(0, s);
done += cssImportantMode(rest.substring(s, s + 10));
rest = rest.substr(s + 10);
}
result = done + rest;
if (result.substr(result.length - 1, 1) == ";" && result.substr(result.length - 6, 6) != " " && result.substr(result.length - 4, 4) != "<" && result.substr(result.length - 4, 4) != ">" && result.substr(result.length - 5, 5) != "&") {
result = result.substring(0, result.length - 1) + "<span style=color:" + cssdelimitercolor + ">;</span>";
}
return "<span style=color:" + csspropertyvaluecolor + ">" + result + "</span>";
}
function cssImportantMode(txt) {
return "<span style=color:" + cssimportantcolor + ";font-weight:bold;>" + txt + "</span>";
}
function jsMode(txt) {
var rest = txt, done = "", esc = [], i, cc, tt = "", sfnuttpos, dfnuttpos, compos, comlinepos, keywordpos, numpos, mypos, dotpos, y;
for (i = 0; i < rest.length; i++) {
cc = rest.substr(i, 1);
if (cc == "\\") {
esc.push(rest.substr(i, 2));
cc = "W3JSESCAPE";
i++;
}
tt += cc;
}
rest = tt;
y = 1;
while (y == 1) {
sfnuttpos = getPos(rest, "'", "'", jsStringMode);
dfnuttpos = getPos(rest, '"', '"', jsStringMode);
compos = getPos(rest, /\/\*/, "*/", commentMode);
comlinepos = getPos(rest, /\/\//, "<br>", commentMode);
numpos = getNumPos(rest, jsNumberMode);
keywordpos = getKeywordPos("js", rest, jsKeywordMode);
dotpos = getDotPos(rest, jsPropertyMode);
if (Math.max(numpos[0], sfnuttpos[0], dfnuttpos[0], compos[0], comlinepos[0], keywordpos[0], dotpos[0]) == -1) {break;}
mypos = getMinPos(numpos, sfnuttpos, dfnuttpos, compos, comlinepos, keywordpos, dotpos);
if (mypos[0] == -1) {break;}
if (mypos[0] > -1) {
done += rest.substring(0, mypos[0]);
done += mypos[2](rest.substring(mypos[0], mypos[1]));
rest = rest.substr(mypos[1]);
}
}
rest = done + rest;
for (i = 0; i < esc.length; i++) {
rest = rest.replace("W3JSESCAPE", esc[i]);
}
return "<span style=color:" + jscolor + ">" + rest + "</span>";
}
function jsStringMode(txt) {
return "<span style=color:" + jsstringcolor + ">" + txt + "</span>";
}
function jsKeywordMode(txt) {
return "<span style=color:" + jskeywordcolor + ">" + txt + "</span>";
}
function jsNumberMode(txt) {
return "<span style=color:" + jsnumbercolor + ">" + txt + "</span>";
}
function jsPropertyMode(txt) {
return "<span style=color:" + jspropertycolor + ">" + txt + "</span>";
}
function getDotPos(txt, func) {
var x, i, j, s, e, arr = [".","<", " ", ";", "(", "+", ")", "[", "]", ",", "&", ":", "{", "}", "/" ,"-", "*", "|", "%"];
s = txt.indexOf(".");
if (s > -1) {
x = txt.substr(s + 1);
for (j = 0; j < x.length; j++) {
cc = x[j];
for (i = 0; i < arr.length; i++) {
if (cc.indexOf(arr[i]) > -1) {
e = j;
return [s + 1, e + s + 1, func];
}
}
}
}
return [-1, -1, func];
}
function getMinPos() {
var i, arr = [];
for (i = 0; i < arguments.length; i++) {
if (arguments[i][0] > -1) {
if (arr.length == 0 || arguments[i][0] < arr[0]) {arr = arguments[i];}
}
}
if (arr.length == 0) {arr = arguments[i];}
return arr;
}
function getKeywordPos(typ, txt, func) {
var words, i, pos, rpos = -1, rpos2 = -1, patt;
if (typ == "js") {
words = ["abstract","arguments","boolean","break","byte","case","catch","char","class","const","continue","debugger","default","delete",
"do","double","else","enum","eval","export","extends","false","final","finally","float","for","function","goto","if","implements","import",
"in","instanceof","int","interface","let","long","NaN","native","new","null","package","private","protected","public","return","short","static",
"super","switch","synchronized","this","throw","throws","transient","true","try","typeof","var","void","volatile","while","with","yield"];
}
for (i = 0; i < words.length; i++) {
pos = txt.indexOf(words[i]);
if (pos > -1) {
patt = /\W/g;
if (txt.substr(pos + words[i].length,1).match(patt) && txt.substr(pos - 1,1).match(patt)) {
if (pos > -1 && (rpos == -1 || pos < rpos)) {
rpos = pos;
rpos2 = rpos + words[i].length;
}
}
}
}
return [rpos, rpos2, func];
}
function getPos(txt, start, end, func) {
var s, e;
s = txt.search(start);
e = txt.indexOf(end, s + (end.length));
if (e == -1) {e = txt.length;}
return [s, e + (end.length), func];
}
function getNumPos(txt, func) {
var arr = ["<br>", " ", ";", "(", "+", ")", "[", "]", ",", "&", ":", "{", "}", "/" ,"-", "*", "|", "%", "="], i, j, c, startpos = 0, endpos, word;
for (i = 0; i < txt.length; i++) {
for (j = 0; j < arr.length; j++) {
c = txt.substr(i, arr[j].length);
if (c == arr[j]) {
if (c == "-" && (txt.substr(i - 1, 1) == "e" || txt.substr(i - 1, 1) == "E")) {
continue;
}
endpos = i;
if (startpos < endpos) {
word = txt.substring(startpos, endpos);
if (!isNaN(word)) {return [startpos, endpos, func];}
}
i += arr[j].length;
startpos = i;
i -= 1;
break;
}
}
}
return [-1, -1, func];
}
}
</script>

Implementing your own javascript text editor is very challenging, I would recommend you to have a look at the medium editor
If you really want to build your own, and you want to know what element the users cursor is in. You will need to use the selection API which overall has great browsers support.

Try this simple text editor:
<div class="hb-editor">
<div id="editor-element"></div>
<textarea id="editor" class="hb-text-editor" style="direction: ltr;"></textarea>
<div id="editor-view-raw" style="margin: 15px; display: none;"></div>
</div>
$(document).ready(function(){
let editor = new TextEditor(
'#editor',
'#editor-view-raw',
'#editor-element'
);
editor.start();
});
Visit https://github.com/Ho3ein83/texteditor for more

This code is about "Simple Text editor". This html code submit to upload.php.
This js code converts what <div id="editor1" contenteditable="true"></div> typed into a <textarea id="my-textarea" name="t" style="display:none"></textarea> value. :
function getContent(){
document.getElementById("my-textarea").value = document.getElementById("editor1").innerHTML;
}
When this button
<button class="fontStyle save" onclick="save()"><save>fas fa-save</save></button> is clicked will direct the relevant data to upload.php from this code. :
function save() {
getContent();
document.getElementById("save").submit();
}
The source code is Editor.html :
<html>
<head>
<style>
body {
font: 400 16px/1.4 'serif';
}
#container #containerHeader{
text-align: center;
cursor:move;
}
#container #editor1 {
border: 1px solid grey;
height: 80%;
width: 80%;
margin: 0px auto 0;
padding:10px;
}
#container fieldset {
margin: 2px auto 0px;
width: 80%;
height:10%;
background-color: #fafafa;
border:none;
}
#container button {
width: 5ex;
text-align: center;
padding: 1px 3px;
height:30px;
width:40px;
background-repeat: no-repeat;
background-size: cover;
border:none;
}
#container img{
width:100%;
}
</style>
<script>
function chooseColor(){
var mycolor = document.getElementById("myColor").value;
document.execCommand('foreColor', false, mycolor);
}
function backColor(){
var nColor = document.getElementById("nColor").value;
document.execCommand('backColor', false, nColor);
}
function changeFont(){
var myFont = document.getElementById("input-font").value;
document.execCommand('fontName', false, myFont);
}
function changeSize(){
var mysize = document.getElementById("fontSize").value;
document.execCommand('fontSize', false, mysize);
}
function checkDiv(){
var editorText = document.getElementById("editor1").innerHTML;
if(editorText === ''){
document.getElementById("editor1").style.border = '5px solid red';
}
}
function removeBorder(){
document.getElementById("editor1").style.border = '1px solid transparent';
}
function getContent(){
document.getElementById("my-textarea").value = document.getElementById("editor1").innerHTML;
}
function save() {
getContent();
document.getElementById("save").submit();
}
</script>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
</head>
<body>
<div id="container" >
<fieldset>
<button class="fontStyle cut" onclick="document.execCommand('cut',false,null);" title="cut(Ctrl+x)"></button>
<button class="fontStyle copy" onclick="document.execCommand('copy',false,null);" title="copy(ctrl+c)"></button>
<button class="fontStyle italic" onclick="document.execCommand('italic',false,null);" title="Italicize Highlighted Text"></button>
<button class="fontStyle bold" onclick="document.execCommand( 'bold',false,null);" title="Bold Highlighted Text"></button>
<button class="fontStyle underline" onclick="document.execCommand( 'underline',false,null);"> </button>
<select id="input-font" class="input" onchange="changeFont (this);">
<option value="Arial">Arial</option>
<option value="Helvetica">Helvetica</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Sans serif">Sans serif</option>
<option value="Courier New">Courier New</option>
<option value="Verdana">Verdana</option>
<option value="Georgia">Georgia</option>
<option value="Palatino">Palatino</option>
<option value="Garamond">Garamond</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Arial Black">Arial Black</option>
<option value="Tahoma">Tahoma</option>
<option value="Comic Sans MS">Comic Sans MS</option>
</select>
<button class="fontStyle subscript" onclick="document.execCommand( 'subscript',false,null);"><subscript>  </subscript></button>
<button class="fontStyle superscript" onclick="document.execCommand( 'superscript',false,null);"><superscript>  </superscript></button>
<button class="fontStyle strikethrough" onclick="document.execCommand( 'strikethrough',false,null);"><strikethrough> </strikethrough></button>
<button class="fontStyle align-left" onclick="document.execCommand( 'justifyLeft',false,null);"><justifyLeft> </justifyLeft></button>
<button class="fontStyle align-center" onclick="document.execCommand( 'justifyCenter',false,null);"><justifyCenter>  </justifyCenter></button>
<button class="fontStyle align-right" onclick="document.execCommand( 'justifyRight',false,null);"><justifyRight>  </justifyRight></button>
<button class="fontStyle redo-apply" onclick="document.execCommand( 'redo',false,null);"><redo></redo></button>
<button class="fontStyle undo-apply" onclick="document.execCommand( 'undo',false,null);"><undo></undo></button>
<button class="fontStyle createlink" onclick="document.execCommand( 'createLink',false,null);"><link> </link></button>
<button class="fontStyle unlink" onclick="document.execCommand( 'unlink',false,null);"><link> </link></button>
<button class="fontStyle orderedlist" onclick="document.execCommand('insertOrderedList', false, null);"><insertOrderedList></insertOrderedList></button>
<button class="fontStyle unorderedlist" onclick="document.execCommand('insertUnorderedList',false, null)"><insertUnorderedList></insertUnorderedList></button>
<button class="fontStyle save" onclick="save()"><save>fas fa-save</save></button>
<input class="color-apply" type="color" onchange="backColor()" id="nColor" title="highlight">
<input class="color-apply" type="color" onchange="chooseColor()" id="myColor" title="font color">
<!-- font size start -->
<br>
font size :
<select id="fontSize" onclick="changeSize()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<!-- font size end -->
</fieldset>
<form method="get" id ="save" action="upload.php">
<div id="editor1" contenteditable="true">
</div>
<textarea id="my-textarea" name="t" style="display:none"></textarea>
</form>
</div>
</body>
</html>

The document.execCommand() function is deprecated. So these answers are also deprecated.
The thing you need now is document.getSelection() function.

I make a text editor. Its very super simple editor. Using just simple tricks. Here is jquery full source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML page editor</title>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="http://localhost/funnel_v2/files/editorscript/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<div class="row">
<div class="col-sm-6">
<h1 class="edit_me_plz" id="jakir">header</h1>
</div>
<div class="col-sm-6">
<button class="edit_me_plz btn btn-info" id="button2">Button</button>
</div>
</div>
<script type="text/javascript">
$(function() {
$(".edit_me_plz").dblclick(function(){
make_element_editable(this);
});
});
function make_element_editable(me){
$( '<textarea onblur="set_my_new_text_with_tag(\''+$(me)[0].localName+'\',\''+$(me)[0].id+'\',this)" style="display: block; width: 100%;">'+$(me)[0].innerHTML+'</textarea>' ).insertAfter(me);
$(me).hide();
}
function set_my_new_text_with_tag(prev_ele,id,me){
$(me).remove();
$("#"+id)[0].innerHTML = $(me)[0].value;
$("#"+id).show();
}
</script>
</body>
</html>
hope you like it. Happy coding. :)

<script>
window.addEventListener('load', function(){
document.getElementById('sampleeditor').setAttribute('contenteditable', 'true');
document.getElementById('sampleeditor2').setAttribute('contenteditable', 'true');
});
function format(command, value) {
document.execCommand(command, false, value);
}
function setUrl() {
var url = document.getElementById('txtFormatUrl').value;
var sText = document.getSelection();
document.execCommand('insertHTML', false, '' + sText + '');
document.getElementById('txtFormatUrl').value = '';
}
</script>
<script>
function changeFont(){
var myFont = document.getElementById("input-font").value;
document.execCommand('fontName', false, myFont);
}
function changeSize(){
var mysize = document.getElementById("fontSize").value;
document.execCommand('fontSize', false, mysize);
}
function changeColor(){
var mysize = document.getElementById("fontColor").value;
document.execCommand('fontColor', false, myColor);
}
function chooseColor(){
var mycolor = document.getElementById("myColor").value;
document.execCommand('foreColor', false, mycolor);
}
</script>
<style>
.editor
{
border:solid 1px #ccc;
padding: 20px;
outline: none;
height: 80%;
}
.sample-toolbar
{
border:solid 1px #ddd;
background:#0055FF;
padding-left: 5px;
padding-bottom: 15px;
padding-top: 15px;
border-radius:3px;
}
a {
padding: 10px 15px;
background: #0055FF;
border: 1px solid #0000;
color: white;
text-decoration: none;
font-size: 15px;
border-radius:3px;
}
a:hover {
color: #ffff;
background: #000EFF;
}
input {
padding: 10px 15px;
background: #0055FF;
border: 1px solid #0000;
color: white;
cursor: pointer;
text-decoration: none;
font-size: 15px;
border-radius:3px;
}
input:hover {
color: #ffff;
background: #000EFF;
}
</style>
<div class="sample-toolbar">
<i class="fa fa-bold fa-fw"></i>old
<i class="fa fa-italic fa-fw"></i>talic
<i class="fa fa-underline"></i> nderline
<i class="fa fa-list fa-fw"></i> List 1
<i class="fa fa-list-ol"></i> List 2
<i class="fa fa-strikethrough"></i> Strikethrough
<i class="fa fa-undo"></i> Undo
<i class="fa fa-redo"></i> Redo
<i class="fas fa-align-left"></i> Align Left
<i class="fas fa-align-center"></i> Align Center
<i class="fas fa-align-right"></i> Align Right
<select id="input-font" class="input" title="Change Font" onchange="changeFont (this);" style= "outline: none;height: 30px;" >
<option value="Arial">Arial</option>
<option value="Helvetica">Helvetica</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Sans serif">Sans serif</option>
<option value="Courier New">Courier New</option>
<option value="Verdana">Verdana</option>
<option value="Georgia">Georgia</option>
<option value="Palatino">Palatino</option>
<option value="Garamond">Garamond</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Arial Black">Arial Black</option>
<option value="Tahoma">Tahoma</option>
<option value="Comic Sans MS">Comic Sans MS</option>
</select>
<select id="fontSize" onclick="changeSize()" title= "Change Font Size" style= "outline: none;height: 30px;" >
<option value selected disabled> Change Font Size</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">6</option>
<option value="5">9</option>
<option value="6">10</option>
<option value="7">12</option>
<option value="8">16</option>
</select>
<input draggable="false" type="color" onchange="chooseColor()" id="myColor" value= "text color" title= "Change Text Color">
</div>
<div class="editor" id="sampleeditor">
</div>

for(let i = 0; i < yourCodeOptions.length; i++) {
document.querySelectorAll("yourCodeOptions")[i].addEventListener("mouseover", function()
{
switch(this.id) {case "ul": document.querySelector("button.li").style.display="block"; //li tag should be "display: none;" before this}
}

How to make a div using loop in JavaScript?

I have to make a div triangle like this, with looping in JavaScript. Anyone know how to make this?
*Input using <select> tag. Thanks!

Check this
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
var container = $("#html2");
$("#CreateDiv").change(function () {
$('#html2').html('');
var strBlocksHTML = '';
var selectedvalue = $("#CreateDiv option:selected").val();
for (var i = 0; i <= selectedvalue; i++) {
for (var n = 0; n < i ; n++) {
strBlocksHTML += '<div id="pdfDiv" style=" background-color:red; display:inline-block; width:50px; height:50px; margin:2px 5px; border:2px solid #ccc;"> </div>';
}
strBlocksHTML += '<div></div>';
}
$('#html2').append(strBlocksHTML);
})
});
</script>
</head>
<body style="text-align:center">
<div>
<select id="CreateDiv">
<option value="0"> Select</option>
<option value="1"> One</option>
<option value="2"> Two</option>
<option value="3"> There</option>
<option value="4"> Four</option>
<option value="5"> Five</option>
</select>
</div>
<br />
<br />
<div id="html2" style="text-align:center">
</div>
</body>
</html>

Simple double loop. First loop for rows, second for single div.
var levels = 5;
var output = '';
for (var row = 1; row <= levels; row++) {
output += '<div class="row">';
for (var i = 0; i < row; i++) {
output += '<div class="item"></div>'
}
output += '</div>';
}
document.write(output);
.row {
text-align: center;
}
.item {
display: inline-block;
width: 40px;
height: 40px;
border: 1px solid green;
background: gray;
}

Categories