Getting my javascript output to display in my HTML - Stack Overflow

admin管理员组

文章数量:1398147

I am sure this is a simple question.

To begin really playing with javascript and understand it I need to have the environment to see what my output is. I have done lessons in javascript but need to actually get the HTML and javascript talking.

What I am looking to do:

Have a user input information into an text box and have it show the result in the html.

is the sky blue? Yes (makes true be displayed on my HTML) is the sky blue? No (makes false be displayed in my HTML)

currently i have no idea if my javascript is doing anything!

Here is my code:

HTML:

<form action="" onsubmit="return checkscript()">
<input type="text" name="value">
<input type="submit" value="Submit">

Javascript:

function checkscript() {
for (i=0;i<4;i++) {
    box = document.example.elements[i];
    if (!box.value) {
        alert('You haven\'t filled in ' + box.name + '!');
        box.focus()
        return false;
    }
}
return true;
}

document.write(box);

I am so confused but need to see the results of what i am doing to see where to fix things, i tried using console in chromes inspect elements function but this has confused me more.

Can someone help and clean the code up to make sense by labelling everything as what they do?

box? check script?

Thanks :)

I am sure this is a simple question.

To begin really playing with javascript and understand it I need to have the environment to see what my output is. I have done lessons in javascript but need to actually get the HTML and javascript talking.

What I am looking to do:

Have a user input information into an text box and have it show the result in the html.

is the sky blue? Yes (makes true be displayed on my HTML) is the sky blue? No (makes false be displayed in my HTML)

currently i have no idea if my javascript is doing anything!

Here is my code:

HTML:

<form action="" onsubmit="return checkscript()">
<input type="text" name="value">
<input type="submit" value="Submit">

Javascript:

function checkscript() {
for (i=0;i<4;i++) {
    box = document.example.elements[i];
    if (!box.value) {
        alert('You haven\'t filled in ' + box.name + '!');
        box.focus()
        return false;
    }
}
return true;
}

document.write(box);

I am so confused but need to see the results of what i am doing to see where to fix things, i tried using console in chromes inspect elements function but this has confused me more.

Can someone help and clean the code up to make sense by labelling everything as what they do?

box? check script?

Thanks :)

• javascript
• html

Share Improve this question Follow asked Dec 11, 2013 at 22:03 React DevReact Dev 42022 gold badges66 silver badges1616 bronze badges 3

• 4 Ok, if you need a sandbox to play in, check out jsfiddle. In fact, check out this: jsfiddle/pL8xF . It's your code, pasted in. (It doesn't do what you want yet.) There are other sites like jsfiddle (jsbin is the second-most-well-known, in my opinion). They all take care of the basic webpage setup, and let you just play with how code reacts. – Scott Mermelstein Commented Dec 11, 2013 at 22:09
• Try onsubmit="if(check script() == true) document.body.innerHTML = 'true'" It should get you started, the body of the page will say 'true' if you return true.... – Abraham Hamidi Commented Dec 11, 2013 at 22:10
• it's easier if you could provide a jsfiddle for whole code. so you can get more and faster answers – a14m Commented Dec 11, 2013 at 22:28

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

I updated the jsfiddle I had made for you. It's a working version that might get you started.

HTML

<!-- I avoided all the mess of forms, since that submits to a server, and that's more than you want right now.  Note that I added ids to each input.  Ids make it very easy to access the elements later.  -->
<input type="text" name="value" id="fillIn">
<input type="button" value="Submit" id="button">

JS

// My methodology here is totally different, since I directly get the element I care about
function checkscript() {
    // find the element in the DOM
    var box = document.getElementById("fillIn");
    // check for a value
    if (box.value) {
        // if there is one, add a new div.  That's probably not what you'll want in the long run, but it gives you something to work with (and seems to match your old idea of using document.write.  I have never yet used document.write, though others with more experience than I may like the concept better.

        // This creates a new element.  If you press F12 and look at this in your debugger, you'll see it actually appear in the HTML once it's appended
        var newElement = document.createElement("div");
        // Set the value to what you want
        newElement.innerHTML = box.value;
        document.body.appendChild(newElement);
    } else {
        alert('You haven\'t filled in ' + box.name + '!');
        box.focus()
        // No returns necessary, since we're not dealing with formsubmittal.
    }
}

// This hooks up the function we just wrote to the click event of the button.
document.getElementById("button").onclick = checkscript;

This may or may not be what you want, but it's at least a place to get started.

A few things to start out:

1.) Make sure all elements have end tags

<input type="text" name="value" />

Note backslash at end of tag.

2.) You are using a form tag, which submits a form to a server side ponent.

Suggest you need to use the onclick event. Which is available on all input controls. Suggest you start with buttons so:

<input type="text" name="value" onclick="myFunction()" />

<script type="text/javascript">
function myFunction() {
   document.write("Hello");
   console.log("Hello");
}
</script>

Writes stuff directly to the html and console. Hope that gets you started.

Regards,

Andy

本文标签： Getting my javascript output to display in my HTMLStack Overflow