gaya Posted March 22, 2013 Share Posted March 22, 2013 (edited) HiI need help in creating a math editor to my form. Please tell me how to create a math editor which includes all symbols like sigma,pi etc. By clicking a button i want to get open the math editor. And after selecting the symbol from math editorit should seen like <font symbol=√>√</font> Please tell me how to do that.√=√The value alone will seen inbetween font tags √ Edited March 22, 2013 by gaya Link to comment Share on other sites More sharing options...
justsomeguy Posted March 22, 2013 Share Posted March 22, 2013 Which part do you need help with? It's a series of buttons with click handlers to add a character to a field. If you also want to evaluate that expression then that's another issue. Link to comment Share on other sites More sharing options...
gaya Posted March 25, 2013 Author Share Posted March 25, 2013 I cann't understand Which part do you need help with? I want help in creating the math symbols with onclick. How shall i create it. Link to comment Share on other sites More sharing options...
jeffman Posted March 25, 2013 Share Posted March 25, 2013 (edited) I cann't understand Which part do you need help with? I want help in creating the math symbols with onclick. How shall i create it.No one wants to waste time explaining things you already know how to do. Here are questions I wonder about. 1. Do you have a special font? Are the symbols available in Webdings? Will you use HTML entities to display the symbols?2. Do you know how to make a click handler?3. Are you using jQuery? (You don't have to)4. Do you know how to add text content to an element? A very basic technique might look like this, but I don't know if it's all you need: var sigmaButton = document.getElementById("sigmaButton");sigmaButton.onclick = function () { var display = document.getElementById("display"); var sigma = "Σ"; display.innerHTML += sigma;} But this is not efficient. This technique requires a unique function for every button, but there are many ways to do it using just one function for all. Knowing which way is best would depend on how you want your HTML to look. So 5. How do you want your HTML to be structured? Do you already have HTML, or do you need someone to design that for you too? Edited March 25, 2013 by Deirdre's Dad Link to comment Share on other sites More sharing options...
thescientist Posted March 25, 2013 Share Posted March 25, 2013 I cann't understand Which part do you need help with? I want help in creating the math symbols with onclick. How shall i create it.In other words, what have you tried? i.e., how far did you get before you came asking for help? If you have nothing, then it will certainly make people less reluctant to help you unless you have already committed some time to the problem yourself first. Link to comment Share on other sites More sharing options...
Ingolme Posted March 25, 2013 Share Posted March 25, 2013 You need a buttons, events, DOM nodes, probably the innerHTML property. Link to comment Share on other sites More sharing options...
gaya Posted March 26, 2013 Author Share Posted March 26, 2013 I have already tried the following code. <!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> In the above code, by clicking the symbol button,I want to display the value inside the textbox and not the symbol.Also i want the value seen inbetween font tags. Link to comment Share on other sites More sharing options...
jeffman Posted March 26, 2013 Share Posted March 26, 2013 I'm sorry. I really don't understand the question. I urge you not to use font tags, however. You can do the same job with spans and inline CSS. Link to comment Share on other sites More sharing options...
AndrewSmith Posted March 26, 2013 Share Posted March 26, 2013 This might help, all you have to do is learn what the symbols you want are in javascript ant input it into the code.Here is a calculator that I made, feel free to take it and use it. <html><head><script LANGUAGE="JavaScript">function addChar(input, character) { if(input.value == null || input.value == "0") input.value = character else input.value += character}function cos(form) { form.display.value = Math.cos(form.display.value);}function sin(form) { form.display.value = Math.sin(form.display.value);}function tan(form) { form.display.value = Math.tan(form.display.value);}function sqrt(form) { form.display.value = Math.sqrt(form.display.value);}function ln(form) { form.display.value = Math.log(form.display.value);}function exp(form) { form.display.value = Math.exp(form.display.value);}function deleteChar(input) { input.value = input.value.substring(0, input.value.length - 1)}function changeSign(input) { if(input.value.substring(0, 1) == "-") input.value = input.value.substring(1, input.value.length) else input.value = "-" + input.value}function compute(form) { form.display.value = eval(form.display.value)}function square(form) { form.display.value = eval(form.display.value) * eval(form.display.value)}function checkNum(str) { for (var i = 0; i < str.length; i++) { var ch = str.substring(i, i+1) if (ch < "0" || ch > "9") { if (ch != "/" && ch != "*" && ch != "+" && ch != "-" && ch != "." && ch != "(" && ch!= ")") { alert("incalculable") return false } } } return true}</SCRIPT></head><BODY><FORM NAME="sci-calc"><TABLE CELLSPACING="1" CELLPADDING="3" ALIGN="center" BORDER="10" COLOR="black"><TR><TD COLSPAN="5" ALIGN="center"><INPUT NAME="display" VALUE="0" SIZE="28" MAXLENGTH="25"></TD></TR><TR><TD ALIGN="center"><INPUT TYPE="button" VALUE=" exp " ONCLICK="if (checkNum(this.form.display.value)) { exp(this.form) }"></TD><TD ALIGN="center"><INPUT TYPE="button" VALUE=" 7 " ONCLICK="addChar(this.form.display, '7')"></TD><TD ALIGN="center"><INPUT TYPE="button" VALUE=" 8 " ONCLICK="addChar(this.form.display, '8')"></TD><TD ALIGN="center"><INPUT TYPE="button" VALUE=" 9 " ONCLICK="addChar(this.form.display, '9')"></TD><TD ALIGN="center"><INPUT TYPE="button" VALUE=" / " ONCLICK="addChar(this.form.display, '/')"></TD></TR><TR><TD ALIGN="center"><INPUT TYPE="button" VALUE=" ln " ONCLICK="if (checkNum(this.form.display.value)) { ln(this.form) }"></TD><TD ALIGN="center"><INPUT TYPE="button" VALUE=" 4 " ONCLICK="addChar(this.form.display, '4')"></TD><TD ALIGN="center"><INPUT TYPE="button" VALUE=" 5 " ONCLICK="addChar(this.form.display, '5')"></TD><TD ALIGN="center"><INPUT TYPE="button" VALUE=" 6 " ONCLICK="addChar(this.form.display, '6')"></TD><TD ALIGN="center"><INPUT TYPE="button" VALUE=" x " ONCLICK="addChar(this.form.display, '*')"></TD></TR><TR><TD ALIGN="center"><INPUT TYPE="button" VALUE=" sqrt " ONCLICK="if (checkNum(this.form.display.value)) { sqrt(this.form) }"></TD><TD ALIGN="center"><INPUT TYPE="button" VALUE=" 1 " ONCLICK="addChar(this.form.display, '1')"></TD><TD ALIGN="center"><INPUT TYPE="button" VALUE=" 2 " ONCLICK="addChar(this.form.display, '2')"></TD><TD ALIGN="center"><INPUT TYPE="button" VALUE=" 3 " ONCLICK="addChar(this.form.display, '3')"></TD><TD ALIGN="center"><INPUT TYPE="button" VALUE=" - " ONCLICK="addChar(this.form.display, '-')"></TD></TR><TR><TD ALIGN="center"><INPUT TYPE="button" VALUE=" sq " ONCLICK="if (checkNum(this.form.display.value)) { square(this.form) }"></TD><TD ALIGN="center"><INPUT TYPE="button" VALUE=" 0 " ONCLICK="addChar(this.form.display, '0')"></TD><TD ALIGN="center"><INPUT TYPE="button" VALUE=" . " ONCLICK="addChar(this.form.display, '.')"></TD><TD ALIGN="center"><INPUT TYPE="button" VALUE=" +/- " ONCLICK="changeSign(this.form.display)"></TD><TD ALIGN="center"><INPUT TYPE="button" VALUE=" + " ONCLICK="addChar(this.form.display, '+')"></TD></TR><TR><TD ALIGN="center"><INPUT TYPE="button" VALUE=" ( " ONCLICK="addChar(this.form.display, '(')"></TD><TD ALIGN="center"><INPUT TYPE="button" VALUE="" ONCLICK="if (addChar(this.form.display.value)) { (this.form) }"></TD><TD ALIGN="center"><INPUT TYPE="button" VALUE=" sin" ONCLICK="if (checkNum(this.form.display.value)) { sin(this.form) }"></TD><TD ALIGN="center"><INPUT TYPE="button" VALUE=" tan" ONCLICK="if (checkNum(this.form.display.value)) { tan(this.form) }"></TD><TD ALIGN="center"><INPUT TYPE="button" VALUE=" ) " ONCLICK="addChar(this.form.display, ')')"></TD></TR><TR><TD ALIGN="center"><INPUT TYPE="button" VALUE="AC" ONCLICK="this.form.display.value = 0 "></TD><TD ALIGN="center" COLSPAN="3"><INPUT TYPE="button" VALUE="backspace" ONCLICK="deleteChar(this.form.display)"></TD><TD ALIGN="center"><INPUT TYPE="button" VALUE="=" NAME="enter" ONCLICK="if (checkNum(this.form.display.value)) { compute(this.form) }"></TD></TR></TABLE></FORM></BODY><FORM NAME="sci-calc"></html> excuse the on and off the the capitalization. Link to comment Share on other sites More sharing options...
gaya Posted March 27, 2013 Author Share Posted March 27, 2013 Thanks AndrewSmith. I tried your code and its working fine. But what i am expecting is not this. The above code what i have posted is now working fine for me. Now my problem is the above code, I am having only one textarea. But in the case of having more than one textarea means how i can modify the code, that thing i don't know. Please tell me how to do that. Link to comment Share on other sites More sharing options...
gaya Posted March 27, 2013 Author Share Posted March 27, 2013 Now i have done for more than one textarea. Still having one problem. By clicking the button the editor is opening. Now i want to do is, again by clicking the button i want to hide the symbols even if i have not selected anything from the editor. Please tell me what to modify for that. Link to comment Share on other sites More sharing options...
gaya Posted March 28, 2013 Author Share Posted March 28, 2013 Anyone please tell me. Is that possible to do. Link to comment Share on other sites More sharing options...
justsomeguy Posted March 28, 2013 Share Posted March 28, 2013 There's already a function called HideSymbols. If the button is calling the ShowSymbols function, then that function should check if it is already shown and, if so, it should call HideSymbols. Link to comment Share on other sites More sharing options...
gaya Posted April 1, 2013 Author Share Posted April 1, 2013 Thanks justsomeguy. I included the following code to hide the editor,by clicking the button again. Thanks all. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now