Questions Tags Users Unanswered

Math Symbol Editor

Question is open.
Be the first to answer this question. (1 voice) (2020 views)
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.

<!DOCTYPE html>
<html>
<head>
    <style>
        .popup {
            position: absolute;
            left: 100px;
            top: 100px;
            border: 1px solid #000;
            background-color: #f0f0f0;
        }

        .popup .symbol {
            display: inline-block;
            padding: 5px;
            margin: 10px;
            border: 1px solid #000;
        }
    </style>
    <script>
        var symbolPopup = null;
        function CreateSymbolPopup () {
            if (symbolPopup) {
                return;
            }

            symbolPopup = document.createElement ('div');
            symbolPopup.className = "popup";

            var symbols = [8719, 8721, 8730];
            for (var i = 0; i < symbols.length; i++) {
                var symbolButton = document.createElement ('span');
                symbolButton.innerHTML = '&#' + symbols[i] + ';';
                symbolButton.onclick = AddSymbol;
                symbolButton.className = "symbol";
                symbolPopup.appendChild (symbolButton);
            }
            document.body.appendChild (symbolPopup);
        }

        function ShowSymbols () {
            CreateSymbolPopup ();
            symbolPopup.style.display = "";
        }
        function HideSymbols () {
            if (symbolPopup) {
                symbolPopup.style.display = "none";
            }
        }

        function AddSymbol () {
            var editor = document.getElementById ('editor');
            editor.value += this.innerHTML;
            HideSymbols ();
        }
    </script>
</head>
<body>
    <button onclick="ShowSymbols ()">Symbols</button>
    <textarea id="editor"></textarea>
</body>
</html>


The code You have given is very useful. But i want to do it in html form. I want to include all the symbols with onclick function in my form. Not completely in my javascript function.Is it possible to do. Please help me.

Your Answer

Limit of files to attach: 3 / Max total size: 1024 KB
File:
Description:
remove