Entiranz Posted April 18, 2012 Share Posted April 18, 2012 Hi everyone, i got a simple Javascript problem id like some help with. I am very VERY new at javascript and probably dont know all the syntax yet but im hopin you can help me solve it or find a better solution. Ive put up an exercise for myself to learn better, in this case to use form inputs to create a table with javascript. Progress is slow and so far ive tried to find the problem myself, but i cant seem to find the solution for it. this is the code: <html> <head> <title>Tabell Skapare</title> <script type="text/javascript" language="Javascript"> function createTable() { var formInputs = document.forms["Controls"].elements; document.write(document.formInputs.elements["farg"].value); document.write(document.formInputs.elements["cell1"].value); document.write(document.formInputs.elements["cell2"].value); } </script> </head> <body> <div id="Controls"> <form name="Controls"> Skriv en bakrundsfärg i färgkod: <input type="text" name="farg"> <br /> Skriv text i den första tabellcellen: <input type="text" name="cell1"> <br /> Skriv text i den andra tabellcellen: <input type="text" name="cell2"> <br /> <input type="button" value="Create" onclick="createTable()"> </form> </div> <div id="Table"> <p id="tableID"></p> </div> </body> </html> Please ignore the other language, that isnt important When i click the button, nothing happens. At this stage, it is just supposed to show the values of the different fields so i know that the values are displayed in javascript correctly. Hopefully, its just me typing the code incorrectly. Hope you can help me with is. Entiranz. Quote Link to comment https://forums.phpfreaks.com/topic/261163-a-simple-problem-im-probably-just-stupid-p/ Share on other sites More sharing options...
requinix Posted April 18, 2012 Share Posted April 18, 2012 The line with formInputs is fine, but the stuff after it isn't. 1. formInputs is a variable. It is not located inside document so document.formInputs won't work. Just call it by its name. 2. formInputs is already the elements collection. You don't need another .elements[] on it. Quote Link to comment https://forums.phpfreaks.com/topic/261163-a-simple-problem-im-probably-just-stupid-p/#findComment-1338366 Share on other sites More sharing options...
Entiranz Posted April 19, 2012 Author Share Posted April 19, 2012 ok, that worked, thanks alot. Now i know that the values are assigned properly. now i have another problem though. :-( Now im trying to create a table with the main function, and as far as i can tell i have probably used the HTML tags inside the wrong way. Actually, im just assuming that u can use them inside, im unsure. I know however now that you cant use them like you do in php, because then this would probably have worked. This is the current code now: <html> <head> <title>Tabell Skapare</title> <script type="text/javascript" language="Javascript"> function createTable() { var formInputs = document.forms["Controls"].elements; document.write("<html><body><table bgcolor=formInputs["farg"].value>") document.write("<tr><td>formInputs["cell1"].value</td><td>formInputs["cell2"].value</td></tr>"); document.write("</table></body></html>"); } </script> </head> <body> <div id="Controls"> <form name="Controls"> Skriv en bakrundsfärg i färgkod: <input type="text" name="farg"> <br /> Skriv text i den första tabellcellen: <input type="text" name="cell1"> <br /> Skriv text i den andra tabellcellen: <input type="text" name="cell2"> <br /> <input type="button" value="Create" onclick="createTable()"> </form> </div> <div id="Table"> <p id="tableID"></p> </div> </body> </html> Once again, i hope you guys can help me correct my numerous errors. Entiranz. Quote Link to comment https://forums.phpfreaks.com/topic/261163-a-simple-problem-im-probably-just-stupid-p/#findComment-1338662 Share on other sites More sharing options...
requinix Posted April 19, 2012 Share Posted April 19, 2012 It's the quoting you have on those HTML strings, not the HTML itself. PHP allows you to embed variables in strings because it can use the "$" to recognize there's a variable. JavaScript has no such feature. To put a value into a string you have to stop the string, add the value, and begin the string again. "</pre> <table bgcolor=" + formInputs[" farg>"</ There are a couple other things I should point out now (there are a couple things that aren't as important to mention yet): - Don't use the language attribute on script tags. Using the type is enough. - document.write() will do weird things. If you want to create the table inside the div#table (because it shouldn't go inside the p#tableID) then actually put it in there; the cheap way to do that is using .innerHTML: var table = "</pre> <table bgcolor=" + formInputs[" farg>...</table>";<br>document.getElementById("table").innerHTML = - bgcolor is deprecated. Use CSS's background(-color) instead. Quote Link to comment https://forums.phpfreaks.com/topic/261163-a-simple-problem-im-probably-just-stupid-p/#findComment-1338668 Share on other sites More sharing options...
Entiranz Posted April 19, 2012 Author Share Posted April 19, 2012 Thank you, ive gotten it to work perfectly, it now displays the table i want. Probably couldnt have done this without you. On a side note though, just a simple question regarding the background color. How exactly do you use the CSS for that in here, and where? Since im used to CSS inside other files or in a style tag, how would you implement it inside the javascript bit, (i tried a copy and a few variations of the example you gave me, it failed)? Entiranz. Quote Link to comment https://forums.phpfreaks.com/topic/261163-a-simple-problem-im-probably-just-stupid-p/#findComment-1338734 Share on other sites More sharing options...
requinix Posted April 19, 2012 Share Posted April 19, 2012 On a side note though, just a simple question regarding the background color. How exactly do you use the CSS for that in here, and where? Since im used to CSS inside other files or in a style tag, how would you implement it inside the javascript bit, (i tried a copy and a few variations of the example you gave me, it failed)? You can do it inline. Most of the time you should use classes and selectors to get what you need, such as naming the table with class="controle", but occasionally it makes sense to do a bit of styling inline with the element. Like now. "</pre> <table style="'background:" forminputs>"</ Quote Link to comment https://forums.phpfreaks.com/topic/261163-a-simple-problem-im-probably-just-stupid-p/#findComment-1338760 Share on other sites More sharing options...
Entiranz Posted April 20, 2012 Author Share Posted April 20, 2012 All done, thank you for all the help ^^ marking this as solved now. Quote Link to comment https://forums.phpfreaks.com/topic/261163-a-simple-problem-im-probably-just-stupid-p/#findComment-1338996 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.