How to add a CSS to this JavaScript or HTML on click buttons?

Question

I am trying to create a simple text editor, but I am wondering how to properly add my style sheet so that the buttons will have some shape and color? I've tried adding some CSS for buttons but it doesn't seem to work for the buttons I need to work it on?

Here is the entire code that I have right now:

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 + "<html>\n<head>\n<title></title>\n</head>\n<body>\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 + "<html>\n<head>\n<title>" + twrite + "</title>\n</head>\n<body ";

    twrite = prompt("Background color? (blank if none)", '');
    if (twrite != "" && twrite != null) {
      twrite = '"' + twrite + '"';
      document.editor.area.value = document.editor.area.value + "bgcolor=" + twrite + " ";
    }

    twrite = prompt("Background image? (blank if none)", '');
    if (twrite != "" && twrite != null) {
      twrite = '"' + twrite + '"';
      document.editor.area.value = document.editor.area.value + "background=" + twrite + " ";
    }

    twrite = prompt("Text color? (blank if none)", '');
    if (twrite != "" && twrite != null) {
      twrite = '"' + twrite + '"';
      document.editor.area.value = document.editor.area.value + "text=" + twrite + " ";
    }

    twrite = prompt("Link color? (blank if none)", '');
    if (twrite != "" && twrite != null) {
      twrite = '"' + twrite + '"';
      document.editor.area.value = document.editor.area.value + "link=" + twrite + " ";
    }

    twrite = prompt("Visited link color? (blank if none)", '');
    if (twrite != "" && twrite != null) {
      twrite = '"' + twrite + '"';
      document.editor.area.value = document.editor.area.value + "vlink=" + twrite + " ";
    }

    document.editor.area.value = document.editor.area.value + ">\n";
  }
}

function end() {
  if (helpstat) {
    alert("Adds the the final elements to a document.");
  } else {
    document.editor.area.value = document.editor.area.value + "\n</body>\n</html>\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 + "<b></b>";
  } else if (stprompt) {
    twrite = prompt("Text?", '');
    if (twrite != null && twrite != "") {
      document.editor.area.value = document.editor.area.value + "<b>" + twrite + "</b>";
    }
  }
}

function italic() {
  if (helpstat) {
    alert("Italicizes text.");
  } else if (basic) {
    document.editor.area.value = document.editor.area.value + "<i></i>";
  } else if (stprompt) {
    twrite = prompt("Text?", '');
    if (twrite != null && twrite != "") {
      document.editor.area.value = document.editor.area.value + "<i>" + twrite + "</i>";
    }
  }
}

function underline() {
  if (helpstat) {
    alert("Underlines text.");
  } else if (basic) {
    document.editor.area.value = document.editor.area.value + "<u></u>";
  } else if (stprompt) {
    twrite = prompt("Text?", '');
    if (twrite != null && twrite != "") {
      document.editor.area.value = document.editor.area.value + "<u>" + twrite + "</u>";
    }
  }
}

function pre() {
  if (helpstat) {
    alert("Sets text as preformatted.");
  } else if (basic) {
    document.editor.area.value = document.editor.area.value + "<pre></pre>";
  } else if (stprompt) {
    twrite = prompt("Text?", '');
    if (twrite != null && twrite != "") {
      document.editor.area.value = document.editor.area.value + "<pre>" + twrite + "</pre>";
    }
  }
}

function center() {
  if (helpstat) {
    alert("Centers text.");
  } else if (basic) {
    document.editor.area.value = document.editor.area.value + "<center></center>";
  } else if (stprompt) {
    twrite = prompt("Text?", '');
    if (twrite != null && twrite != "") {
      document.editor.area.value = document.editor.area.value + "<center>" + twrite + "</center>";
    }
  }
}

function hbar() {
  if (helpstat) {
    alert("Creates a horizontal bar.");
  } else {
    document.editor.area.value = document.editor.area.value + "<hr>\n";
  }
}

function lbreak() {
  if (helpstat) {
    alert("Makes a new line, the equivalent of return or enter.");
  } else {
    document.editor.area.value = document.editor.area.value + "<br />\n";
  }
}

function pbreak() {
  if (helpstat) {
    alert("Makes two new lines, the equivalent of two returns or enters.");
  } else {
    document.editor.area.value = document.editor.area.value + "<p>\n";
  }
}

function image() {
  if (helpstat) {
    alert("Inserts an image.");
  } else if (basic) {
    document.editor.area.value = document.editor.area.value + '<img src=""></img>\n';
  } else if (stprompt) {
    twrite = prompt("Image location?", '');
    if (twrite != null && twrite != "") {
      twrite = '"' + twrite + '"';
      document.editor.area.value = document.editor.area.value + '<img src=' + twrite + '>\n';
    }
  }
}

function aleft() {
  if (helpstat) {
    alert("Inserts an image with align left.");
  } else if (basic) {
    document.editor.area.value = document.editor.area.value + '<img src="" align=left></img>\n';
  } else if (stprompt) {
    twrite = prompt("Image location?", '');
    if (twrite != null && twrite != "") {
      twrite = '"' + twrite + '"';
      document.editor.area.value = document.editor.area.value + '<img src=' + twrite + ' align=left>\n';
    }
  }
}

function aright() {
  if (helpstat) {
    alert("Inserts an image with align right.");
  } else if (basic) {
    document.editor.area.value = document.editor.area.value + '<img src="" align=right></img>\n';
  } else if (stprompt) {
    twrite = prompt("Image location?", '');
    if (twrite != null && twrite != "") {
      twrite = '"' + twrite + '"';
      document.editor.area.value = document.editor.area.value + '<img src=' + twrite + ' align=right></img>\n';
    }
  }
}

function atop() {
  if (helpstat) {
    alert("Inserts an image with align top.");
  } else if (basic) {
    document.editor.area.value = document.editor.area.value + '<img src=""align=top></img>\n';
  } else if (stprompt) {
    twrite = prompt("Image location?", '');
    if (twrite != null && twrite != "") {
      twrite = '"' + twrite + '"';
      document.editor.area.value = document.editor.area.value + '<img src=' + twrite + ' align=top></img>\n';
    }
  }
}

function amid() {
  if (helpstat) {
    alert("Inserts an image with align middle.");
  } else if (basic) {
    document.editor.area.value = document.editor.area.value + '<img src="" align=middle></img>\n';
  } else if (stprompt) {
    twrite = prompt("Image location?", '');
    if (twrite != null && twrite != "") {
      twrite = '"' + twrite + '"';
      document.editor.area.value = document.editor.area.value + '<img src=' + twrite + ' align=middle></img>\n';
    }
  }
}

function abottom() {
  if (helpstat) {
    alert("Inserts an image with align bottom.");
  } else if (basic) {
    document.editor.area.value = document.editor.area.value + '<img src="" align=bottom></img>\n';
  } else if (stprompt) {
    twrite = prompt("Image location?", '');
    if (twrite != null && twrite != "") {
      twrite = '"' + twrite + '"';
      document.editor.area.value = document.editor.area.value + '<img src=' + twrite + ' align=bottom></img>\n';
    }
  }
}

function head1() {
  if (helpstat) {
    alert("Creates a header, size 1 (largest size).");
  } else if (basic) {
    document.editor.area.value = document.editor.area.value + "<h1></h1>\n";
  } else if (stprompt) {
    twrite = prompt("Text?", '');
    if (twrite != null && twrite != "") {
      document.editor.area.value = document.editor.area.value + "<h1>" + twrite + "</h1>\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 + "<h2></h2>\n";
  } else if (stprompt) {
    twrite = prompt("Text?", '');
    if (twrite != null && twrite != "") {
      document.editor.area.value = document.editor.area.value + "<h2>" + twrite + "</h2>\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 + "<h3></h3>\n";
  } else if (stprompt) {
    twrite = prompt("Text?", '');
    if (twrite != null && twrite != "") {
      document.editor.area.value = document.editor.area.value + "<h3>" + twrite + "</h3>\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 + "<h4></h4>\n";
  } else if (stprompt) {
    twrite = prompt("Text?", '');
    if (twrite != null && twrite != "") {
      document.editor.area.value = document.editor.area.value + "<h4>" + twrite + "</h4>\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 + "<h5></h5>\n";
  } else if (stprompt) {
    twrite = prompt("Text?", '');
    if (twrite != null && twrite != "") {
      document.editor.area.value = document.editor.area.value + "<h5>" + twrite + "</h5>\n";
    }
  }
}

function head6() {
  if (helpstat) {
    alert("Creates a header, size 6 (smallest size).");
  } else if (basic) {
    document.editor.area.value = document.editor.area.value + "<h6></h6>\n";
  } else if (stprompt) {
    twrite = prompt("Text?", '');
    if (twrite != null && twrite != "") {
      document.editor.area.value = document.editor.area.value + "<h6>" + twrite + "</h6>\n";
    }
  }
}

function linkopen() {
  if (helpstat) {
    alert("Begins a link.");
  } else if (basic) {
    document.editor.area.value = document.editor.area.value + '<a href=""></a>';
  } else if (stprompt) {
    twrite = prompt("File location?", '');
    if (twrite != null && twrite != "") {
      twrite = '"' + twrite + '"';
      document.editor.area.value = document.editor.area.value + '<a href=' + twrite + '>';
      for (;;) {
        twrite = prompt("Text?", '');
        if (twrite != "" && twrite != null) {
          break;
        } else {
          prompt("You must enter the link text.", 'Ok, sorry.');
        }
      }
      document.editor.area.value = document.editor.area.value + twrite + '</a>\n';
    }
  }
}

function linktext() {
  if (helpstat) {
    alert("Inserts the text for a link.");
  } else if (basic) {
    for (;;) {
      twrite = prompt("Text?", '');
      if (twrite != "" && twrite != null) {
        break;
      } else {
        prompt("You must enter the link text.", 'Ok, sorry.');
      }
    }
    document.editor.area.value = document.editor.area.value + twrite + '\n';
  } else if (stprompt) {
    alert("Not used in prompt mode.");
  }
}

function linkclose() {
  if (helpstat) {
    alert("Closes a link.");
  } else if (basic) {
    document.editor.area.value = document.editor.area.value + "</a>\n";
  } else if (stprompt) {
    alert("Not used in prompt mode.");
  }
}

function anchor() {
  if (helpstat) {
    alert("Sets an anchor (e.g. #here).");
  } else if (basic) {
    document.editor.area.value = document.editor.area.value + '<a name=""></a>\n';
  } else if (stprompt) {
    twrite = prompt("Anchor name?", '');
    if (twrite != null && twrite != "") {
      twrite = '"' + twrite + '"';
      document.editor.area.value = document.editor.area.value + '<a name=' + twrite + '>\n';
    }
  }
}

function orderopen() {
  if (helpstat) {
    alert("Starts an ordered list.");
  } else if (basic) {
    document.editor.area.value = document.editor.area.value + "<ol></ol>\n";
  } else if (stprompt) {
    for (i = 1;; i++) {
      twrite = prompt("Item " + i + "? (Blank entry stops.)", '');
      if (twrite == "" || twrite == null) {
        break;
      }
      if (i == 1) {
        document.editor.area.value = document.editor.area.value + "<ol>\n";
        okeydokey = 1;
      }
      document.editor.area.value = document.editor.area.value + "<li>" + twrite + "\n";
    }
    if (okeydokey) {
      document.editor.area.value = document.editor.area.value + "</ol>\n";
    }
  }
}

function li() {
  if (helpstat) {
    alert("Creates an item in a list.");
  } else if (basic) {
    document.editor.area.value = document.editor.area.value + "<li>";
  } else if (stprompt) {
    alert("Not used in prompt mode.");
  }
}

function orderclose() {
  if (helpstat) {
    alert("Closes an ordered list.");
  } else if (basic) {
    document.editor.area.value = document.editor.area.value + "</ol>\n";
  } else if (stprompt) {
    alert("Not used in prompt mode.");
  }
}

function unorderopen() {
  if (helpstat) {
    alert("Starts an unordered list.");
  } else if (basic) {
    document.editor.area.value = document.editor.area.value + "<ul></ul>";
  } else if (stprompt) {
    for (i = 1;; i++) {
      twrite = prompt("Item " + i + "? (Blank entry stops.)", '');
      if (twrite == "" || twrite == null) {
        break;
      }
      if (i == 1) {
        document.editor.area.value = document.editor.area.value + "<ul>\n";
        okeydokey = 1;
      }
      document.editor.area.value = document.editor.area.value + "<li>" + twrite + "\n";
    }
    if (okeydokey) {
      document.editor.area.value = document.editor.area.value + "</ul>\n";
    }
  }
}

function unorderclose() {
  if (helpstat) {
    alert("Closes an unordered list.");
  } else if (basic) {
    document.editor.area.value = document.editor.area.value + "</ul>\n";
  } else if (stprompt) {
    alert("Not used in prompt mode.");
  }
}

function defopen() {
  if (helpstat) {
    alert("Starts a definition list.");
  } else if (basic) {
    document.editor.area.value = document.editor.area.value + "<dl>";
  } else if (stprompt) {
    for (i = 1;; i++) {
      twrite = prompt("Term " + i + "? (Blank entry stops.)", '');
      if (twrite == "" || twrite == null) {
        break;
      }
      if (i == 1) {
        document.editor.area.value = document.editor.area.value + "<dl>\n";
        okeydokey = 1;
      }
      document.editor.area.value = document.editor.area.value + "<dt>" + twrite + "</dt>\n";
      twrite = prompt("Definition" + i + "? (Blank entry stops.)", '');
      if (twrite == "" || twrite == null) {
        break;
      }
      document.editor.area.value = document.editor.area.value + "<dd>" + twrite + "<dd>\n";
    }
    if (okeydokey) {
      document.editor.area.value = document.editor.area.value + "</dl>\n";
    }
  }
}

function defterm() {
  if (helpstat) {
    alert("Creates the term in a definition.");
  } else if (basic) {
    document.editor.area.value = document.editor.area.value + "<dt>";
  } else if (stprompt) {
    alert("Not used in prompt mode.");
  }
}

function define() {
  if (helpstat) {
    alert("Creates the definition.");
  } else if (basic) {
    document.editor.area.value = document.editor.area.value + "<dd>";
  } else if (stprompt) {
    alert("Not used in prompt mode.");
  }
}

function defclose() {
  if (helpstat) {
    alert("Closes a defeinition list.");
  } else if (basic) {
    document.editor.area.value = document.editor.area.value + "</dt>";
  } else if (stprompt) {
    alert("Not used in prompt mode.");
  }
}

function font() {
  if (helpstat) {
    alert("Sets the font.");
  } else if (basic) {
    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("Sets the font color.");
  } else if (basic) {
    document.editor.area.value = document.editor.area.value + '';
  } else if (stprompt) {
    twrite = prompt("Color? (hex or name)", '');
    if (twrite != null && twrite != "") {
      twrite = '"' + twrite + '"';
      document.editor.area.value = document.editor.area.value + '';
    }
  }
}

function fontsize() {
  if (helpstat) {
    alert("Sets the font size (a number 1-7, or +2, -3, etc.).");
  } else if (basic) {
    document.editor.area.value = document.editor.area.value + "font size=>";
  } else if (stprompt) {
    twrite = prompt("Size? (e.g. 1, +5, -2, etc.)", '');
    if (twrite != null && twrite != "") {
      document.editor.area.value = document.editor.area.value + "";
    }
  }
}

function fontclose() {
  if (helpstat) {
    alert("Closes the font changes.");
  } else if (basic) {
    document.editor.area.value = document.editor.area.value + "";
  } else if (stprompt) {
    document.editor.area.value = document.editor.area.value + "";
  }
}

function formtable() {
  if (helpstat) {
    alert("Creates a table.");
  } else if (basic) {
    document.editor.area.value = document.editor.area.value + "<table></table>";
  } else if (stprompt) {
    alert("Not used in prompt mode.");
  }
}

function formtr() {
  if (helpstat) {
    alert("Creates a table row.");
  } else if (basic) {
    document.editor.area.value = document.editor.area.value + "<tr></tr>";
  } else if (stprompt) {
    alert("Not used in prompt mode.");
  }
}

function formtd() {
  if (helpstat) {
    alert("Creates a standard table cell.");
  } else if (basic) {
    document.editor.area.value = document.editor.area.value + "<td></td>";
  } else if (stprompt) {
    alert("Not used in prompt mode.");
  }
}

.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="&#9875;" 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>

Your code in not easy to follow, try creting a fiddle that reprodices your problem, but start by moving the style section to the header — Vince, Feb 27 '20 at 09:21
Does this answer your question? [Using an HTML button to call a JavaScript function](https://stackoverflow.com/questions/1947263/using-an-html-button-to-call-a-javascript-function) — Vala Khosravi, Feb 27 '20 at 09:54

score 3 · Answer 1 · answered Feb 27 '20 at 09:48

CSS:- .btn {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
}

HTML: <div onclick="myFunction()">
  <button class="btn">1</button>
  <button class="btn active">2</button>
  <button class="btn">3</button>
  <button class="btn">4</button>
  <button class="btn">5</button>
</div>

<element onclick="myScript">

score 2 · Answer 2 · answered Feb 27 '20 at 09:22

Add this way your style

input[type=button] {
  padding: 10px 20px;
  font-size: 15px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #e5e59b;
  border: none;
  border-radius: 15px;
}
input[type=button]:hover {background-color: #f5f5d8}

input[type=button]:active {
  background-color: #e5e59b;
  transform: translateY(1px);
}

https://jsfiddle.net/lalji1051/y183wjek/3/

score 1 · Answer 3 · answered Feb 27 '20 at 09:25

1

I think you forgot to add class attribute to each button, so simply add

class="button"

in the input elements

In CSS, "." (dot) refers to class, so any element that have that class will use the class custom style

answered Feb 27 '20 at 09:25

Aidil

101
1
7

How to add a CSS to this JavaScript or HTML on click buttons?

3 Answers3