Member Avatar for hkBattousai

[IMG][/IMG]
I want to ask if there is a way to access an obcect which is not in a form field. My textbook doesn't cover that topic. All the sample code in it is done with the form fields.
The picture above illustrates the DOM object model that is used in JavaScript. What I understand from the picture is there is no way to access a control which is not in a form field.

For example, is there any way to make the code below work?

<html>
    <body>
        <script language="javascript">
            function Function1() { document.TextBox.value = "You clicked the first button.";}
            function Function2() { document.TextBox.value = "You clicked the second button.";}
        </script>
        <input type="text"  name="TextBox"  value="This is the text box."><br>
        <input type="button" name="Button1" value="Button 1" onClick="Function1();">
        <input type="button" name="Button2" value="Button 2" onClick="Function2();">
    </body>
</html>
  • 2 Contributors
  • 1 Reply
  • 135 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by MattEvans

Dani AI

Generated

raised a good question: controls are not limited to form collections — every element on the page is part of the DOM and can be accessed. is right to point toward identifying elements explicitly, but there are several complementary ways to find and work with elements (and a couple of gotchas to watch out for).

To pick elements you can use CSS-style selection or name-based lookup rather than relying on implicit document properties. querySelector/querySelectorAll accepts any CSS selector and is very flexible, while getElementsByName and the form.elements collection let you work with form controls when they exist. See the MDN docs for details on the selector and form APIs: Document.querySelector, Document.getElementsByName, and HTMLFormElement.elements.

A small, modern pattern that keeps HTML clean is to attach listeners from script and update the element properties (for inputs use value; for non-inputs use textContent or innerHTML). For example, wait for DOMContentLoaded, select the elements with a selector, then call addEventListener on the buttons to change the textbox value. See EventTarget.addEventListener for cross-browser notes.

Practical tips:

  • Prefer explicit selection over relying on browser-created globals (avoid document.SomeName or implicit window globals — they’re brittle).
  • Keep id values unique if you use them.
  • Place script after markup or use DOMContentLoaded so elements exist when you select them.
  • For very old browsers, provide fallbacks or use a small library; otherwise the modern APIs above are well supported.

This approach makes the code clearer and works for every element, not just form fields.

Member Avatar for MattEvans

The easiest way is to identify the inputs rather than name them:

<html>
    <body>
        <script language="javascript">
            function Function1() { document.getElementById('TextBox').value = "You clicked the first button.";}
            function Function2() { document.getElementById('TextBox').value = "You clicked the second button.";}
        </script>
        <input type="text"  [b]id="TextBox"[/b] name="TextBox"  value="This is the text box."><br>
        <input type="button" name="Button1" value="Button 1" onClick="Function1();">
        <input type="button" name="Button2" value="Button 2" onClick="Function2();">
    </body>
</html>

Those 'id' attributes have got to be unique.

There are other ways to get at objects that aren't id'ed; see this page:

http://www.pageresource.com/dhtml/ryan/part4-2.html

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.