My Css is not aligning and my JavaScript returns nodelist - CSS-Tricks

This topic is empty.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
August 16, 2016 at 4:07 pm #244611
picatree
Participant
I need help aligning my css to line up all my elements nicely how do i do that? I know moving the TOP and Left moves the elements around but it’s not working. Also my javascript OK function returns node list. How can i return the value of an element textbox1? Thank you.

<!DOCTYPE>
<HTML>
<HEAD>
<TITLE>First Step </TITLE>
```
&lt;STYLE&gt;
```
Html, Body {
margin:10;
padding:0;
}

#Label1 {
position: absolute;
cursor: default;
Left: 142px;
top: 38px;
z-index:-1;
}
#Label2 {
position: absolute;
cursor: default;
Left: 142px;
top: 223px;
z-index:-1;
}
#Textbox1 {
position: absolute;
Left: 142px;
top: 68px;
z-index:-1;
}
#Textbox2 {
position: absolute;
Left: 142px;
top: 110px;
z-index:-1;
}
#CommandButton1 {
position: absolute;
Left: 142px;
top: 154px;
height: 30px;
width: 435px;
z-index:-1;
}
</STYLE>
<SCRIPT LANGUAGE=”JavaScript”><!–
Function okClick() {
var b= document.getElementsByName(“Textbox1″)
alert (” Your Name Is “+b)
}
// –>
</script>
<BODY>
</BODY>
<FORM ID= “TakingFirstStep” NAME=”TakingFirstStep” METHOD=POST ACTION=”javascript:void(0)”>

<Label for=”Label1″>Enter your email address and click the button below to get started.</label>

<Label for=”Label2″>I hate SPAM and promise to keep your email address safe.</label>

<INPUT TYPE=TEXT NAME=”Textbox1″ VALUE=”name” SIZE= 23.125

<INPUT TYPE=TEXT NAME=”Textbox2″ VALUE=”email” SIZE= 23.125

<INPUT TYPE=”button” Onclick= “OkClick() ” value = “ok” >

</FORM>
</HEAD>
</HTML>
August 16, 2016 at 10:37 pm #244617

Beverleyh
Participant

The markup for your form has a few problems but the main one is that your input elements aren’t closed.

You might also want to consider removing the negative z-index definitions in the CSS – I don’t understand why you’d want those in there. Maybe consider relative positioning too instead of absolute?

Also, if you want to access the value of a textbox, try using the “value” property in JavaScript. Googling something like “how to get the value of a textbox in JavaScript” will help you.

August 16, 2016 at 11:14 pm #244619
picatree
Participant
The markup is correct and if I change values of Top and left in css the elements move accordingly. The JavaScript code is also right except that I think values from the elements are retrieved differently than I am trying to. Run it and see what I mean and please correct it. The z index is used to position elements on top of the other in case one becomes overlapped. Here is the code again.

I need help aligning my css to line up all my elements nicely how do i do that? I know moving the TOP and Left moves the elements around but it’s not working. Also my javascript OK function returns node list. How can i return the value of an element textbox1? Here is the codelink http://codepen.io/anon/pen/zBbwgVThank you.

<!DOCTYPE>
<HTML>
<HEAD>
<TITLE>First Step </TITLE>
```
&lt;STYLE&gt;
```
Html, Body {
margin:10;
padding:0;
}

#Label1 {
position: absolute;
cursor: default;
Left: 142px;
top: 38px;
z-index:-1;
}
#Label2 {
position: absolute;
cursor: default;
Left: 142px;
top: 223px;
z-index:-1;
}
#Textbox1 {
position: absolute;
Left: 142px;
top: 68px;
z-index:-1;
}
#Textbox2 {
position: absolute;
Left: 142px;
top: 110px;
z-index:-1;
}
#CommandButton1 {
position: absolute;
Left: 142px;
top: 154px;
height: 30px;
width: 435px;
z-index:-1;
}
</STYLE>
<SCRIPT LANGUAGE=”JavaScript”><!–
Function okClick() {
var b= document.getElementsByName(“Textbox1″)
alert (” Your Name Is “+b)
}
// –>
</script>
<BODY>
</BODY>
<FORM ID= “TakingFirstStep” NAME=”TakingFirstStep” METHOD=POST ACTION=”javascript:void(0)”>

<Label for=”Label1″>Enter your email address and click the button below to get started.</label>

<Label for=”Label2″>I hate SPAM and promise to keep your email address safe.</label>

<INPUT TYPE=TEXT NAME=”Textbox1″ VALUE=”name” SIZE= 23.125

<INPUT TYPE=TEXT NAME=”Textbox2″ VALUE=”email” SIZE= 23.125

<INPUT TYPE=”button” Onclick= “OkClick() ” value = “ok” >

</FORM>
</HEAD>
</HTML>
August 17, 2016 at 12:18 am #244622
giudev
Participant
Try to wrap your code using three backquotes (`) like explained at the bottom of this page (black block “Posting Code”) .
It will makes easier for us to read and analyse.

Anyway if your problem is that you are not getting the value of your input (Textbox1) is because your javascript is wrong.

var b is the DOM element, but you want the value of that DOM element.
So you need b.value

It should be:
```
var b= document.getElementsByName(“Textbox1″).value
alert (” Your Name Is “+b)
```
August 17, 2016 at 2:25 am #244625
Beverleyh
Participant
The markup is correct

Sorry, you are mistaken.

It might be correct in your actual web page but what you are pasting in to the forum here is malformed and incorrect in a few places.

For example, The code you’re showing In your posts use a mish-mash of quotes instead of the straight type, and your input elements aren’t closed. You have;
```
<INPUT TYPE=TEXT NAME=”Textbox1″ VALUE=”name” SIZE= 23.125 
```
instead of;
```
<input type="text" name="Textbox1" value="name" size="23"> 
```
And I’m pretty sure that the size attribute should be a whole number – no decimals.

The JavaScript code is also right except that I think values from the elements are retrieved differently than I am trying to.

Sorry, no – your JavaScript is wrong. If you want to retrieve the value of an input field, try using the “value” property. But as previously suggested, a quick Google search for “how to get the value of a textbox in JavaScript” will lead you to plenty of examples that will help you http://lmgtfy.com/?q=how+to+get+the+value+of+a+textbox+in+JavaScript
Note that you might want to use getElementById instead of getElementsByName too.

I need help aligning my css to line up all my elements nicely how do i do that? I know moving the TOP and Left moves the elements around but it’s not working.

That’s because you’re referencing element ids in your CSS that don’t exist in your markup;
```
#Label1 { ... }
```
Refers to an element that has an id of “Label1”, so;
```
<Label for=”Label1″>Enter your email address and click the button below to get started.</label> 
<INPUT TYPE=TEXT NAME=”Textbox1″ VALUE=”name” SIZE= 23.125 
```
Should be more like;
```
<label id="Label1" for="Textbox1">Enter your email address and click the button below to get started.</label>
<input type="text" id="Textbox1" name="Textbox1" value="name" size="23">
```
Note above how the label’s “for” attribute should be the “id” of the input it relates to.
August 17, 2016 at 5:08 am #244633

picatree
Participant

Thank you Beverly. Still the thing is not working maybe it’s css. If I use getelements byID the form stops working altogether. But if I use getelementsbyNAME I get nodelist. Can you please correct the whole thing and send me a working example?
What I am trying to achieve is to be able to move the elements around the page anyway I like and still be able to access element values through JavaScript functions.
Thank you you’re truly helpful.

August 17, 2016 at 6:02 am #244634

Beverleyh
Participant

Can you please correct the whole thing and send me a working example?

It might seem harsh, but I’m going to say no.

It seems like you’re after a quick fix rather than putting in the effort to learn the basics of the web. And besides, this is your work, not mine – I have my own.

Try approaching the task in stages;
1 – Write the correct HTML
2 – Style with CSS
3 – Add functionality with JavaScript

You know what elements you’re using but as I’ve already said, they’re malformed, so you should Google each in turn to check for correct syntax (or start by applying the changes I’ve suggested) and to make sure that you’re using them correctly (e.g. how labels work alongside form elements). With the correct usage, syntax and attributes, task 2 and 3 will be much easier. To start you off, here is the Mozilla HTML element guide: https://developer.mozilla.org/en/docs/Web/HTML/Element (usage examples are contained within)

Post back with a CodePen demo after you’ve had a go at step 1 yourself (writing correct HTML). I bet you’ll be able to apply the CSS yourself once the HTML is correct, then if you need further help with the JavaScript, we can chip in with help afterwards.
Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

The forum ‘Other’ is closed to new topics and replies.