Я пытаюсь создать простой текстовый редактор, но мне интересно, как правильно добавить мою таблицу стилей, чтобы кнопки имели некоторую форму и цвет? Я пытался добавить CSS для кнопок, но он не работает для кнопок, над которыми мне нужно работать?
Вот весь код, который у меня сейчас есть:
helpstat = false;
stprompt = false;
basic = true;
function thelp(swtch) {
if (swtch == 1) {
basic = false;
stprompt = false;
helpstat = true;
} else if (swtch == 0) {
helpstat = false;
stprompt = false;
basic = true;
} else if (swtch == 2) {
helpstat = false;
basic = false;
stprompt = true;
}
}
function treset() {
if (helpstat) {
alert("Clears the current editor.");
} else {
clear = prompt("Are you sure? (y/n)", '');
clear = clear.toLowerCase();
if (clear == 'y') {
document.editor.reset();
document.editor.value = "";
}
}
}
function start() {
if (helpstat) {
alert("Elements that appear at the beginning of the document, including TITLE.");
} else if (basic) {
document.editor.area.value = document.editor.area.value + "\n\n\n\n\n";
} else if (stprompt) {
for (;;) {
twrite = prompt("Title?", '');
if (twrite != "" && twrite != null) {
break;
} else {
prompt("You must enter a title.", 'Ok, sorry.');
}
}
document.editor.area.value = document.editor.area.value + "\n\n" + twrite + "\n\n\n";
}
}
function end() {
if (helpstat) {
alert("Adds the the final elements to a document.");
} else {
document.editor.area.value = document.editor.area.value + "\n\n\n";
}
}
function preview() {
if (helpstat) {
alert("Preview/save the document.");
} else {
temp = document.editor.area.value;
preWindow = open("", "preWindow", "status=no,toolbar=n,menubar=y");
preWindow.document.open();
preWindow.document.write(temp);
preWindow.document.close();
}
}
function bold() {
if (helpstat) {
alert("Bold text.");
} else if (basic) {
document.editor.area.value = document.editor.area.value + "";
} else if (stprompt) {
twrite = prompt("Text?", '');
if (twrite != null && twrite != "") {
document.editor.area.value = document.editor.area.value + "" + twrite + "";
}
}
}
function italic() {
if (helpstat) {
alert("Italicizes text.");
} else if (basic) {
document.editor.area.value = document.editor.area.value + "";
} else if (stprompt) {
twrite = prompt("Text?", '');
if (twrite != null && twrite != "") {
document.editor.area.value = document.editor.area.value + "" + twrite + "";
}
}
}
function underline() {
if (helpstat) {
alert("Underlines text.");
} else if (basic) {
document.editor.area.value = document.editor.area.value + "";
} else if (stprompt) {
twrite = prompt("Text?", '');
if (twrite != null && twrite != "") {
document.editor.area.value = document.editor.area.value + "" + twrite + "";
}
}
}
function pre() {
if (helpstat) {
alert("Sets text as preformatted.");
} else if (basic) {
document.editor.area.value = document.editor.area.value + "
";} else if (stprompt) {twrite = prompt (" Text? ", ''); If (twrite! = Null && twrite! =" ") {Document.editor.area.value = document.editor .area.value + "
" + twrite + "
";}}} function center () {if (helpstat) {alert ("Centers text.");} else if (basi c) {document.editor.area.value = document.editor.area.value + "
";} иначе if (stprompt) {twrite = prompt ("Text?", ''); if (twrite! = null && twrite! = "" ) {document.editor.area.value = document.editor.area.value + "
" + twrite + "
";}}} функция hbar () {if (helpstat) {alert ("Создает горизонтальная черта. ");} else {document.editor.area.value = document.editor.area.value +"
\ n ";}} функция lbreak () {if (helpstat) {alert (" Делает новая строка, эквивалент возврата или ввода. ");} else {document.editor.area.value = document.editor.area.value +" \ n ";}} function pbreak () {if (helpstat) {alert (" Делает две новые строки, эквивалент двух возвратов или вводит. ");} else {document.editor.area.value = document.editor. area.value + "
\ n";}} function image () {if (helpstat) {alert ("Вставка изображения.");} else if (basi c) {document.editor.area. value = document.editor.area.value + '
\ n';} else if (stprompt) {twrite = prompt ("Местоположение изображения?", ''); if (twrite! = null && twrite ! = "") {twrite = '"' + twrite + '"'; document.editor.area.value = document.editor.area.value + ' \ П '; }}} function aleft () {if (helpstat) {alert ("Вставляет изображение с выравниванием по левому краю."); } else if (basi c) {document.editor.area.value = document.editor.area.value + '
\n';
} else if (stprompt) {
twrite = prompt("Image location?", '');
if (twrite != null && twrite != "") {
twrite = '"' + twrite + '"';
document.editor.area.value = document.editor.area.value + '
\n';
}
}
}
function aright() {
if (helpstat) {
alert("Inserts an image with align right.");
} else if (basic) {
document.editor.area.value = document.editor.area.value + '
\n';
} else if (stprompt) {
twrite = prompt("Image location?", '');
if (twrite != null && twrite != "") {
twrite = '"' + twrite + '"';
document.editor.area.value = document.editor.area.value + '
\n';
}
}
}
function atop() {
if (helpstat) {
alert("Inserts an image with align top.");
} else if (basic) {
document.editor.area.value = document.editor.area.value + '
\n';
} else if (stprompt) {
twrite = prompt("Image location?", '');
if (twrite != null && twrite != "") {
twrite = '"' + twrite + '"';
document.editor.area.value = document.editor.area.value + '
\n';
}
}
}
function amid() {
if (helpstat) {
alert("Inserts an image with align middle.");
} else if (basic) {
document.editor.area.value = document.editor.area.value + '
\n';
} else if (stprompt) {
twrite = prompt("Image location?", '');
if (twrite != null && twrite != "") {
twrite = '"' + twrite + '"';
document.editor.area.value = document.editor.area.value + '
\n';
}
}
}
function abottom() {
if (helpstat) {
alert("Inserts an image with align bottom.");
} else if (basic) {
document.editor.area.value = document.editor.area.value + '
\n';
} else if (stprompt) {
twrite = prompt("Image location?", '');
if (twrite != null && twrite != "") {
twrite = '"' + twrite + '"';
document.editor.area.value = document.editor.area.value + '
\n';
}
}
}
function head1() {
if (helpstat) {
alert("Creates a header, size 1 (largest size).");
} else if (basic) {
document.editor.area.value = document.editor.area.value + "
\n";
} else if (stprompt) {
twrite = prompt("Text?", '');
if (twrite != null && twrite != "") {
document.editor.area.value = document.editor.area.value + "
" + twrite + "
\n";
}
}
}
function head2() {
if (helpstat) {
alert("Creates a header, size 2 (slightly smaller than 1).");
} else if (basic) {
document.editor.area.value = document.editor.area.value + "
\n";
} else if (stprompt) {
twrite = prompt("Text?", '');
if (twrite != null && twrite != "") {
document.editor.area.value = document.editor.area.value + "
" + twrite + "
\n";
}
}
}
function head3() {
if (helpstat) {
alert("Creates a header, size 3 (slightly smaller than 2).");
} else if (basic) {
document.editor.area.value = document.editor.area.value + "
\n";
} else if (stprompt) {
twrite = prompt("Text?", '');
if (twrite != null && twrite != "") {
document.editor.area.value = document.editor.area.value + "
" + twrite + "
\n";
}
}
}
function head4() {
if (helpstat) {
alert("Creates a header, size 4 (slightly smaller than 3).");
} else if (basic) {
document.editor.area.value = document.editor.area.value + "
\n";
} else if (stprompt) {
twrite = prompt("Text?", '');
if (twrite != null && twrite != "") {
document.editor.area.value = document.editor.area.value + "
" + twrite + "
\n";
}
}
}
function head5() {
if (helpstat) {
alert("Creates a header, size 5 (slightly smaller than 4).");
} else if (basic) {
document.editor.area.value = document.editor.area.value + "
\n";
} else if (stprompt) {
twrite = prompt("Text?", '');
if (twrite != null && twrite != "") {
document.editor.area.value = document.editor.area.value + "
" + twrite + "
\n";
}
}
}
function head6() {
if (helpstat) {
alert("Creates a header, size 6 (smallest size).");
} else if (basic) {
document.editor.area.value = document.editor.area.value + "
\n";
} else if (stprompt) {
twrite = prompt("Text?", '');
if (twrite != null && twrite != "") {
document.editor.area.value = document.editor.area.value + "
" + twrite + "
\n";
}
}
}
function linkopen() {
if (helpstat) {
alert("Begins a link.");
} else if (basic) {
document.editor.area.value = document.editor.area.value + '
'; } else if (stprompt) {twrite = prompt ("Расположение файла?", ''); if (twrite! = null && twrite! = "") {twrite = '"' + twrite + '"'; document.editor.area.value = document.editor.area.value + ' '; for (;;) {twrite = prompt ("Text?", ''); if (twrite! = "" && twrite! = null) {break; } else {prompt («Вы должны ввести текст ссылки.», «Хорошо, извините.»); }} document.editor.area.value = document.editor.area.value + twrite + ' \ n'; }}} function linktext () {if (helpstat) {alert ("Вставляет текст для ссылки."); } else if (basi c) {for (;;) {twrite = prompt ("Text?", ''); if (twrite! = "" && twrite! = null) {break; } else {prompt («Вы должны ввести текст ссылки.», «Хорошо, извините.»); }} document.editor.area.value = document.editor.area.value + twrite + '\ n'; } else if (stprompt) {alert ("Не используется в режиме подсказки."); }} function linkclose () {if (helpstat) {alert ("Закрывает ссылку."); } else if (basi c) {document.editor.area.value = document.editor.area.value + " \ n"; } else if (stprompt) {alert ("Не используется в режиме подсказки."); }} function anchor () {if (helpstat) {alert ("Устанавливает привязку (например, #here)."); } else if (basi c) {document.editor.area.value = document.editor.area.value + ' \ n'; } else if (stprompt) {twrite = prompt ("Имя привязки?", ''); if (twrite! = null && twrite! = "") {twrite = '"' + twrite + '"'; document.editor.area.value = документ. editor.area.value + ' \ n'; }}} function orderopen () {if (helpstat) {alert ("Начинает упорядоченный список."); } else if (basi c) {document.editor.area.value = document.editor.area.value + "
\ n"; } else if (stprompt) {for (i = 1 ;; i ++) {twrite = prompt ("Item" + i + "? (Пустой ввод останавливается.)", ''); if (twrite == "" || twrite == null) {break; } if (i == 1) {document.editor.area.value = document.editor.area.value + "
- " + twrite + "\ n"; } if (okeydokey) {document.editor.area.value = document.editor.area.value + "
\ n"; }}} function li () {if (helpstat) {alert ("Создает элемент в списке."); } else if (basi c) {document.editor.area.value = document.editor.area.value + ""; } else if (stprompt) {alert ("Не используется в режиме подсказки."); }} function orderclose () {if (helpstat) {alert ("Закрывает упорядоченный список."); } else if (basi c) {document.editor.area.value = document.editor.area.value + " \ n"; } else if (stprompt) {alert ("Не используется в режиме подсказки."); }} function unorderopen () {if (helpstat) {alert ("Начинает неупорядоченный список."); } else if (basi c) {document.editor.area.value = document.editor.area.value + "
"; } else if (stprompt) {for (i = 1 ;; i ++) {twrite = prompt ("Item" + i + "? (Пустой ввод останавливается.)", ''); if (twrite == "" || twrite == null) {break; } if (i == 1) {document.editor.area.value = document.editor.area.value + "
- " + twrite + "\ n"; } if (okeydokey) {document.editor.area.value = document.editor.area.value + "
\ n"; }}} function unorderclose () {if (helpstat) {alert ("Закрывает неупорядоченный список."); } else if (basi c) {document.editor.area.value = document.editor.area.value + " \ n"; } else if (stprompt) {alert ("Не используется в режиме подсказки."); }} function defopen () {if (helpstat) {alert ("Начинает список определений."); } else if (basi c) {document.editor.area.value = document.editor.area.value + "
- " + twrite + "
- " + twrite + "
- \ n"; } if (okeydokey) {document.editor.area.value = document.editor.area.value + "
\ n"; }}} function defterm () {if (helpstat) {alert ("Создает термин в определении."); } else if (basi c) {document.editor.area.value = document.editor.area.value + ""; } else if (stprompt) {alert ("Не используется в режиме подсказки."); }} function define () {if (helpstat) {alert ("Создает определение."); } else if (basi c) {document.editor.area.value = document.editor.area.value + ""; } else if (stprompt) {alert ("Не используется в режиме подсказки."); }} function defclose () {if (helpstat) {alert ("Закрывает список определений."); } else if (basi c) {document.editor.area.value = document.editor.area.value + ""; } else if (stprompt) {alert ("Не используется в режиме подсказки."); }} function font () {if (helpstat) {alert ("Устанавливает шрифт."); } else if (basi c) {document.editor.area.value = document.editor.area.value + ''; } else if (stprompt) {twrite = prompt ("Font?", ''); if (twrite! = null && twrite! = "") {twrite = '"' + twrite + '"'; document.editor.area.value = document.editor.area.value + ''; }}} function fontcolor () {if (helpstat) {alert ("Устанавливает цвет шрифта."); } else if (basi c) {document.editor.area.value = document.editor.area.value + ''; } else if (stprompt) {twrite = prompt ("Color? (hex или name)", ''); if (twrite! = null && twrite! = "") {twrite = '"' + twrite + '"'; document.editor.area.value = document.editor.area.value + ''; }}} function fontsize () {if (helpstat) {alert ("Устанавливает размер шрифта (число 1-7 или +2, -3 и т. д. c.)."); } else if (basi c) {document.editor.area.value = document.editor.area.value + "font size =>"; } else if (stprompt) {twrite = prompt ("Size? (например, 1, +5, -2, et c.)", ''); if (twrite! = null && twrite! = "") {document.editor.area.value = document.editor.area.value + ""; }}} function fontclose () {if (helpstat) {alert ("Закрывает изменения шрифта."); } else if (basi c) {document.editor.area.value = document.editor.area.value + ""; } else if (stprompt) {document.editor.area.value = document.editor.area.value + ""; }} function formtable () {if (helpstat) {alert ("Создает таблицу."); } else if (basi c) {document.editor.area.value = document.editor.area.value + "
"; } else if (stprompt) {alert ("Не используется в режиме подсказки."); }} function formtr () {if (helpstat) {alert ("Создает строку таблицы."); } else if (basi c) {document.editor.area.value = document.editor.area.value + ""; } else if (stprompt) {alert ("Не используется в режиме подсказки."); }} function formtd () {if (helpstat) {alert ("Создает стандартную ячейку таблицы."); } else if (basi c) {document.editor.area.value = document.editor.area.value + ""; } else if (stprompt) {alert ("Не используется в режиме подсказки."); }}
.button {
padding: 10px 20px;
font-size: 15px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: #e5e59b;
border: none;
border-radius: 15px;
}
.button:hover {
background-color: #f5f5d8
}
.button:active {
background-color: #e5e59b;
transform: translateY(1px);
}
<form name="editor">
<center>
<table border=1>
<td align=center>
<b>Choose Mode:</b><br>
<input type="radio" name="mode" value="help" onClick="thelp(1)">Guide
<input type="radio" name="mode" value="prompt" onClick="thelp(2)">Prompt
<input type="radio" name="mode" value="basic" checked onClick="thelp(0)">Write
</td>
</table>
<br>
<table border=1>
<tr>
<td align=center>
<input type="button" value="Preview" onClick="preview()">
<input type="button" value=" Start " onClick="start()">
<input type="button" value=" End " onClick="end()">
<input type="button" value="<img>" onClick="image()">
<input type="button" value="<L>" onClick="aleft()">
<input type="button" value="<R>" onClick="aright()">
<input type="button" value="<T>" onClick="atop()">
<input type="button" value="<M>" onClick="amid()">
<input type="button" value="<B>" onClick="abottom()">
<input type="button" value="Reset" onClick="treset()">
</td>
</tr>
<td>
<input type="button" value="B" onClick="bold()">
<input type="button" value="I" onClick="italic()">
<input type="button" value="U" onClick="underline()">
<input type="button" value="C" onClick="center()">
<input type="button" value="<p>" onClick="pbreak()">
<input type="button" value="<br>" onClick="lbreak()">
<input type="button" value="<hr>" onClick="hbar()">
<input type="button" value="<pre>" onClick="pre()">
<input type="button" value="h1" onClick="head1()">
<input type="button" value="h2" onClick="head2()">
<input type="button" value="h3" onClick="head3()">
<input type="button" value="h4" onClick="head4()">
<input type="button" value="h5" onClick="head5()">
<input type="button" value="h6" onClick="head6()">
</td>
</tr>
<tr>
<td>
<input type="button" value="Link" onClick="linkopen()">
<input type="button" value="⚓" onClick="anchor()">
<input type="button" value="<ol>" onClick="orderopen()">
<input type="button" value="<li>" onClick="li()">
<input type="button" value="<ul>" onClick="unorderopen()">
<input type="button" value="<t>" onClick="formtable()">
<input type="button" value="<tr>" onClick="formtr()">
<input type="button" value="<td>" onClick="formtd()">
<input type="button" value="Font" onClick="font()">
<input type="button" value="Color" onClick="fontcolor()">
<input type="button" value="Size" onClick="fontsize()">
<input type="button" value="Close" onClick="fontclose()">
</td>
</tr>
</td>
</table>
<table>
<tr>
<textarea name="area" rows=50 cols=71 wrap=physical>
</textarea>
<br>
<br>
</td>
</table>
</center>
<body>
<button class="button" value="<td> onClick=" formtr() " <a href="https://oeclassics.blogspot.com ">Check</a></button>
</body>
</form>