html - Displaying the results of a Javascript function -

-

i'm trying javascript function print out, nothing comes up. i'm setting basic page of text boxes, radio buttons , checkboxes users fill out , results of elements print out create basic barebones profile page.

i apologize in advance sloppy or obsolete coding, i'm starting out stuff (my first semester of classes in web design). i'm assuming i've made minor error i'm not catching that's screwing rest of code, or i'm plain missing key line of code.

here's code below (javascript): `

function validate() {     dataout = document.getelementbyid("profileout");      var color = document.profilein.bgcolor.value;     style.backgroundcolor = color;      var border = document.profilein.border.value;     style.border = border;      var name = document.profilein.name.value;     dataout.innerhtml = "<h1 id='name'>" name "</p>";      if  (document.getelementbyid('sportsgames').checked {         dataout.innerhtml = "<img src='images/sportsgames.jpg' alt='i sports , games' />";     } else if  (document.getelementbyid('tvfilm').checked {         dataout.innerhtml = "<img src='images/tvfilm.jpg' alt='i tv , film' />";     } else if  (document.getelementbyid('artlit').checked {         dataout.innerhtml = "<img src='images/artlit.jpg' alt='i art , literature' />";     } else {         dataout.innerhtml = "<img src='images/nothing.jpg' alt='i hate everything' />";     }      var entry1 = document.profilein.entry1.value;     dataout.innerhtml = "<p id='para1'>" entry1 "</p>";     document.getelementbyid("para1").style.color="#0000ff";     var entry2 = document.profilein.entry2.value;     dataout.innerhtml = "<p id='para2'>" entry2 "</p>";     document.getelementbyid("para2").style.color="#ff0000";      var years = document.profilein.years.value;     dataout.innerhtml = "<p>i have been practicing hobby " + years + " years.</p>";      var music = document.profilein.music.value;     dataout.innerhtml = "<p> favorite music genre " + music + ".</p>";      var birthday = document.profilein.birthday.value;     dataout.innerhtml = "<p>birthday:" + music + "</p>";      var email = document.profilein.email.value;     dataout.innerhtml = "<p> e-mail:" + music + "</p>";      var website = document.profilein.website.value;     dataout.innerhtml = "<p>website:" + music + "</p>";      document.getelementbyid('profileout').innerhtml = profileout; }  </script>`

and html code well:

<body id="profile"> <form id="profilein" name="profilein" method="post" onsubmit="return validate()">     <fieldset id ="set1">         <legend>your page</legend>         <label for="bgcolor">         <input type="color" id="bgcolor" name="bgcolor" value="#ffffff" /> select background color<br>          choose thickness of border<br>         <input type="range" id="border" name="border" value="5" min="0" max="10" step="1" /><br>         0 1 2 3 4 5 6 7 8 9 10     </fieldset>      <fieldset id="set2">         <legend>your profile</legend>         enter name <input type="text" id="name" name="name" /> <br>          enter favourite hobby <br>         <input type="radio" id="sportsgames" name="hobby" value="sportsgames">sports & games<br>         <input type="radio" id="tvfilm" name="hobby" value="tvfilm">tv & film<br>         <input type="radio" id="artlit" name="hobby" value="artlit">art & literature<br><br>          <label for="entry">what part of hobby favourite?</label><br>         <textarea id="entry1" name="comments1" rows="8" cols="50">type in here...</textarea><br>              <label for="entry">which part of hobby best at?</label><br>         <textarea id="entry2" name="comments2" rows="8" cols="50">type in here...</textarea><br>          how many years have practiced hobby? <br>         <input id="years" type="number" name="years" value="0" min="1" max="100" /><br>          what's favorite genre of music? <br>         <select id="music">         <option value="rock">rock<option>         <option value="pop">pop<option>         <option value="country">country<option>         <option value="r&b">r&amp;b<option>         <option value="classical">classical<option>         </select>     </fieldset>      <fieldset id="set3">         <legend>your info</legend>         birthday <input id="birthday" type="date" name="date" /> <br>         email <input id="email" name="email" type="email" placeholder="example@gmail.com" /> <br>         website <input id="website" name="website" type="url" placeholder="www.example.com" />     </fieldset>      <fieldset id="set4">         <input class="btn" type="submit" id="btn1" value="press continue" />         <input class="btn" type="reset" id="btn2" value="press clear" />     </fieldset> </form>  <section id="profileout"> </section>

any help's appreciated, guys!

lines below incorrect. in javascript, appending should done +.

dataout.innerhtml = "<h1 id='name'>" name "</p>";

should 

dataout.innerhtml = "<h1 id='name'>" + name + "</p>";

Comments

Post a Comment

Popular posts from this blog

windows - Single EXE to Install Python Standalone Executable for Easy Distribution -

-
i used pyinstaller create standalone exe file pyqt project. did not use single file option because exe created single file option takes long open. therefore, pyinstaller created dist folder contains bunch of files including program.exe file. create setup.exe file place contents of dist folder in program directory , create shortcut in start menu , on desktop. want super simple user. maybe setup.exe files when download program cnet. found inno-setup, looks promising. however, not know if there special considerations because program standalone program create python/pyqt program. thanks! have experience task? there program using task not know about? inno-setup or nsis easiest use. tell them files include , put them , create nice installer you. wrote short tutorial on experiences using innosetup might find helpful: http://www.blog.pythonlibrary.org/2008/08/27/packaging-wxpymail-for-distribution/ note tutorial based around wxpython app wrote, concepts same.
Read more

c# - Access objects in UserControl from MainWindow in WPF -

-
i have simple xaml, how can change text property of textblock in usercontrol1 mainwindow ? <window x:class="refactorxaml.mainwindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:refactorxaml="clr-namespace:refactorxaml" title="mainwindow" height="350" width="525"> <grid> <grid.rowdefinitions> <rowdefinition height="100"></rowdefinition> <rowdefinition height="100"></rowdefinition> </grid.rowdefinitions> <grid> <refactorxaml:usercontrol1></refactorxaml:usercontrol1> </grid> <grid grid.row="1"> <button>change text</button> </grid> </grid> </window> <usercon...
Read more

javascript - How to name a jQuery function to make a browser's back button work? -

-
i'm trying write function ajaxyfy web site, works perfect, except function button. that's have now: function loading() { if (typeof history.pushstate !== "undefined") { var historycount = 0; $('.menu-item, .logo').on('click','a',function(e){ e.preventdefault(); $(this).data('clicked', true); if ($(this).is('.logo a')) { var homepage = $(this).attr('href'); function1(homepage); history.pushstate(null, null, homepage); } else if ($(this).is('.projects a')) { var projects = $(this).attr('href'); function2(projects); history.pushstate(null, null, projects); } else { var pages = $(this).attr('href'); function3(pages); history.pushstate(null, null, pages); ...
Read more