Jump to content

The second input field


L8V2L

Recommended Posts

the second input field want work, and the function by the look of it seem to intertwine with each other by typing in the first field than clicking out nothing change But than when typing in the second field, and than clicking out the letter change; depending on the last letter in the first input field, if capital lower case, if lower case capital.<!DOCTYPE html><html><head><script>function myFunction(){var x=document.getElementById("fname");x.value=x.value.toUpperCase();}</script><script>function myFunction1(){var y=document.getElementById("fname");y.value=y.value.toLowerCase();}</script></head><body>Enter your name: <input type="text" id="fname" onchange="myFunction()"><br><br/>Enter your name: <input type="text" id="fname" onchange="myFunction1()"><p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p></body></html>I have another question to ask too. What is this font, it's very easy to read. The one you are looking at that is being displayed, not the editing version.

Edited by L8V2L
Link to comment
Share on other sites

You need to go through the HTML tutorial. You are not allowed to assign the same id to more than one element.

<!DOCTYPE html><html><head><script>function myFunction(x){x.value=x.value.toUpperCase();}function myFunction1(x){x.value=x.value.toLowerCase();}</script></head><body>Enter your fname: <input type="text" id="fname" onchange="myFunction(this)"><br/><br/>Enter your lname: <input type="text" id="lname" onchange="myFunction1(this)"><p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p></body></html>
  • Like 1
Link to comment
Share on other sites

Oh... I through I was okay cause of the function name... I give up to soon... go back through the HTML tutorial!!!???? .... Not a bad ideal, I already went through them, so now I'm just going back over JavaScript to make sure I have a good foundation underneath me before I move on to php. I did jQuery too, and also plan on going back over that too. Matter fact after this go over with JavaScript, I'm going to go through the example one by one, as I rewrite them underneath them. If I'm still lost.. not really lost, but not have a basic understanding for each of the few components of JavaScript. Than I'll go through the reference, and more tutorial. Really I'm reading books, and doing other tutorial. I want to make a game with HTML5, CSS3, and JavaScript(+ jQuery). I want to make this game I have in mind with these components.

 

:lol: Thank you both for the feed back on what I did wrong. :good: Likes for both of you! :D Thanks! :D

Edited by L8V2L
Link to comment
Share on other sites

I have another question, but don't really want to make a topic for it, for I feel like I'll be spanning then. Please consider having a tutorial help section... Yes I know that what this is... but I see that it seem most people are asking of complicated programming question here, not really any simplex. If all in all, than please tell me if this would have been okay to make another topic to ask this so I can feel less caution about having to worrying about spanning, please. In this problem, I don't want to use document.write so I try this:<!DOCTYPE html><html><body><p>Hello World!</p><p>The DOM is very useful!</p><p>This example demonstrates the <b>length</b> property.</p><p id="para3"></p><script>x=document.getElementsByTagName("p");for (i=0;i<x.length;i++){document.write(x.innerHTML);document.write("<br>");}</script><script>x=document.getElementsByTagName("body");for (i=0;i<x.length;i++){y=document.getElementById("para3");y.innerText=(x.innerText);}</script></body></html>It's printing out to the page, but not the same. I'll be simple if you could copy this and past it in: http://www.w3schools.com/js/tryit.asp?filename=try_dom_nodelist_length <-- Here! Try it yourself page, to see what it is I am referring to.

Edited by L8V2L
Link to comment
Share on other sites

Maybe...

<!DOCTYPE html><html><head><meta charset="utf-8"><title>t</title></head><body><p>Hello World!</p><p>The DOM is very useful!</p><p>This <i>example</i> demonstrates the <b>length</b> property.</p><hr><div id="out1"></div><hr><div id="out2"></div><hr><div id="out3"></div><script>var out1 = document.getElementById('out1');var out2 = document.getElementById('out2');var out3 = document.getElementById('out3');out1.innerHTML = '';out2.innerHTML = '';out3.innerHTML = '';var x = document.getElementsByTagName("p");for (var i=0 ; i<x.length ; i++){out1.innerHTML += i +': '+ x[i].innerHTML + '<br>';out2.innerHTML += i +': '+ x[i].innerText + '<br>';out3.innerHTML += i +': '+ x[i].textContent + '<br>';}</script></body></html>
  • Like 1
Link to comment
Share on other sites

It's beautiful. Now questions to simplify it:

Maybe...

<!DOCTYPE html><html><head><meta charset="utf-8"><title>t</title></head><body><p>Hello World!</p><p>The DOM is very useful!</p><p>This <i>example</i> demonstrates the <b>length</b> property.</p><hr><div id="out1"></div> <!-- id equal assign to out1 --><hr><div id="out2"></div> <!-- id equal assign to out2 --><hr><div id="out3"></div> <!-- id equal assign to out3 --><script>var out1 = document.getElementById('out1'); // id value equal assign to var out1var out2 = document.getElementById('out2'); // id value equal assign to var out2var out3 = document.getElementById('out3'); // id value equal assign to var out3out1.innerHTML = ''; // out1.innerHTML equal assign to '';out2.innerHTML = ''; // out2.innerHTML equal assign to '';out3.innerHTML = ''; // out3.innerHTML equal assign to '';var x = document.getElementsByTagName("p"); // tag name p equal assign to xfor (var i=0 ; i<x.length ; i++) // var is equal assign to 0; i less than p(s); plus 1{out1.innerHTML += i +': '+ x[i].innerHTML + '<br>'; // placing the node text in the divout2.innerHTML += i +': '+ x[i].innerText + '<br>'; // placing the node text in the divout3.innerHTML += i +': '+ x[i].textContent + '<br>'; // placing the node text in the div}</script></body></html>

 

Where did the number come from? the array of x added them? And why nodediv.idname.innerHTML equal assign to ' ';? Can it just be printed in? ...I'm looking at it... I'm still a noob, could you explain it to me, how every loosely you want, if I don't get the syntax order, than I'll just move on. Farther down the line it will hit me with celerity clarity.(p.s. accidently misspell clarity as celerity, but look up the word to see why an error message was not thrown, i.e. the red squiggly line that would go under it... long story short, I kept it! :))Still looking at it: So the +=i +': ' is what add on the number. i=0, as it loop through the function to add the next line of node text... right? Then x of this array is the text node in the node p where it go through each p, than print out the result, as either innerHTML, innerText, textContent print out the result in the the p + the node <br> putting it on another line beneath it... right? Why when I take out the + before =i +': ' it only print out the last line x[2] and not the first x[0]? It as if it is printing them down backwards... Please a clear explanation of the step and process... or loosely, how ever you feel like writing it.So again +=i + is the same as 1=0, so than the second time around 1=1 and the last time around for x[[2] 1=2.. Right? ...That can't be right... Where are the number coming from! Please explain. Edited by L8V2L
Link to comment
Share on other sites

variable x is an array of paragraph elements. Each paragraph element has contents. You can read the contents of such an element or assign new contents to it. The most commonly used method is innerHTML. Javascript uses the plus (+) to add numbers or to concatenate strings.

Link to comment
Share on other sites

variable x is an array of paragraph elements. Each paragraph element has contents. You can read the contents of such an element or assign new contents to it. The most commonly used method is innerHTML. Javascript uses the plus (+) to add numbers or to concatenate strings.

...Thanks but I already knew about concatenating strings, and additional numbers... I was referring to the print out with the number beside it. Even know I know that the first child is ground 0 base, why is it printing out that.If you don't know how to explain or just don't really feel like referring back to this, it's okay. Thanks for the help so far.
Link to comment
Share on other sites

I don't understand your question. Don't you understand what the code is doing? Do you understand the for-loop and how it sets and changes the value of the variable "i"? Do you understand the use of innerHTML? In each pass through the for-loop a line of HTML text is added to the innerHTML of each output div.

Link to comment
Share on other sites

I don't understand your question. Don't you understand what the code is doing? Do you understand the for-loop and how it sets and changes the value of the variable "i"? Do you understand the use of innerHTML? In each pass through the for-loop a line of HTML text is added to the innerHTML of each output div.

When it print out the paragraph onto the web page, what cause it to number it from 0 to 2? That is what I'm asking. What is numbering the paragraph out? The array? I don't think it could be that, for I am not printing out number too. What cause it to print the number beside each paragraph?If you still don't understand that's okay.I have another question, and as I said again, I don't want to risk spanning the tutorial help section, for I feel these are not to be all that important... to be consider to others mins me to be all that important to post.<!DOCTYPE html><html><body><p>A script on this page starts this clock:</p><p id="demo"></p><script>var myVar=setInterval(function(){myTimer()},1000);function myTimer(){var d=new Date();var t=d.toLocaleTimeString();document.getElementById("demo").innerHTML=t;}<br></br></script><h1 id="demo12"></h1><script>var myVar=setInterval(function(){myTimer()},1000);function myTimer(){var d=new Date();var t=d.toLocaleTimeString();document.getElementById("demo12").innerHTML=t;}</script></body></html>Why want it show the time two time? I even but nodes break in the html field. It only show the time ones even know I have it in two separate nodes paragraph. I been staring at the screen for quite some time, until I got the ideal to put comment in the nodes script to comment out the code to the first one, and the time still shown, showing me I hade the code right, so I change the node paragraph for the second one to node header 1, and still no different, for with the first comment it out, it'll show, but uncomment out, and it only show the first one disregarding the second one. Please help me... With the first question also before the code if you want/can.
Link to comment
Share on other sites

When it print out the paragraph onto the web page, what cause it to number it from 0 to 2? That is what I'm asking. What is numbering the paragraph out? The array? I don't think it could be that, for I am not printing out number too. What cause it to print the number beside each paragraph?

 

The value of the variable "i" starts at 0 and increases each time through the for-loop. It appears on the screen because I put it into the innerHTML assignment statement... don't you see i concatenated with ': ' below?

out1.innerHTML +=  i  +  ': '  +  x[i].innerHTML  +  '<br>';

Also for your time code I think it should be like this...

<!DOCTYPE html><html><head><meta charset="utf-8"><title>time</title></head><body><p>A script on this page starts this clock:</p><p id="demo"></p><script>var myVar = setInterval(function(){myTimer()},1000);function myTimer(){var d = new Date();var t = d.toLocaleTimeString();document.getElementById("demo").innerHTML = t;}</script></body></html>
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...