Javascript is not working and I cannot figure out why

Question

I forked some code from jsfiddle and when I put it into an html doc it does not work properly. But works just fine in the fiddle. Something tells me that i'm missing a library but not sure which one I should use.

What should be occurring if it is actually working is a text box or two should be disabled and then enabled if the other radio button is selected.

Fiddle can be found here: http://jsfiddle.net/t5xKW/3/

Any help would be appreciated.

<html>
<head>
<title> text conversion</title>
<script language="JavaScript">
var rbProject = document.getElementById('radio1-1');
var rbAccount = document.getElementById('radio1-2');
var txtRef = document.getElementById('txtRef');
var txtTitle = document.getElementById('txtTitle');
var txtName = document.getElementById('txtName');


rbProject.addEventListener('change', function (e) {
    txtRef.disabled = false;
    txtTitle.disabled = false;
    txtName.disabled = true;
})

rbAccount.addEventListener('change', function (e) {
    txtRef.disabled = true;
    txtTitle.disabled = true;
    txtName.disabled = false;
})
</script>
<style>
#container {
    width:700px;
    border-style:solid;
    border-width:2px;
}
.table {
    display:table;
    width: 650px;
    border-style:solid;
    border-width:1px;
}
.tr {
    display:table-row;
    height:28px;
}
.td {
    display:table-cell;
}
.td1 {
    width:200px;
}
.td2 {
    width:130px;
}
.td3 {
    width:400px;
}
</style>
</head>

<body>
<div class="table">
    <div class="tr">
        <div class="td td1">
            <input type="radio" name="section1a" id="radio1-1" value="radio" />
            <label class="large black" for="radio1-1">Project</label>
        </div>
        <div class="td td2"> <span class="large black">Ref:</span> 
        </div>
        <div class="td td3">
            <input id="txtRef" class="form-textbox" name="ref" type="text" placeholder="Insert project reference" />
        </div>
    </div>
    <div class="tr">
        <div class="td td1"></div>
        <div class="td td2"> <span class="large black">Title:</span> 
        </div>
        <div class="td td3">
            <input id="txtTitle" class="form-textbox" name="title" type="text" placeholder="Insert project title" />
        </div>
    </div>
    <div class="tr">
        <div class="td td1">
            <input type="radio" name="section1a" id="radio1-2" value="radio" />
            <label class="large black" for="radio1-2">Account</label>
        </div>
        <div class="td td2"> <span class="large black">Name:</span> 
        </div>
        <div class="td td3">
            <input id="txtName" class="form-textbox" name="name" type="text" placeholder="Insert account name" />
        </div>
    </div>
    <div class="tr">
        <div class="td td1">
            <input type="radio" name="section1a" id="radio1-3" value="radio" />
            <label class="large black" for="radio1-3">General Business</label>
        </div>
        <div class="td td2"></div>
        <div class="td td3">
            <input class="form-textbox" name="organization" type="text" placeholder="Insert client organisation name" />
        </div>
    </div>
</div>
</body>


</html>

You tagged this with jQuery, but I don't see (1) any jQuery code or (2) where you include jQuery. — elixenide
– elixenide, Commented May 9, 2015 at 4:13
The language attribute has been deprecated. Use type="text/javascript" — Shaunak D
– Shaunak D, Commented May 9, 2015 at 4:18
Does this answer your question? Executing JavaScript in the <head>, getElementById returns null — dumbass
– dumbass, Commented Jun 26, 2024 at 5:02

Deepak · Accepted Answer · 2015-05-09 04:25:36Z

The HTML is not being rendered before the javascript is being executed. Put your script just before closing body tag (</body>):

<html>
<head>
<title> text conversion</title>

<style>
#container {
    width:700px;
    border-style:solid;
    border-width:2px;
}
.table {
    display:table;
    width: 650px;
    border-style:solid;
    border-width:1px;
}
.tr {
    display:table-row;
    height:28px;
}
.td {
    display:table-cell;
}
.td1 {
    width:200px;
}
.td2 {
    width:130px;
}
.td3 {
    width:400px;
}
</style>
</head>

<body>
<div class="table">
    <div class="tr">
        <div class="td td1">
            <input type="radio" name="section1a" id="radio1-1" value="radio" />
            <label class="large black" for="radio1-1">Project</label>
        </div>
        <div class="td td2"> <span class="large black">Ref:</span> 
        </div>
        <div class="td td3">
            <input id="txtRef" class="form-textbox" name="ref" type="text" placeholder="Insert project reference" />
        </div>
    </div>
    <div class="tr">
        <div class="td td1"></div>
        <div class="td td2"> <span class="large black">Title:</span> 
        </div>
        <div class="td td3">
            <input id="txtTitle" class="form-textbox" name="title" type="text" placeholder="Insert project title" />
        </div>
    </div>
    <div class="tr">
        <div class="td td1">
            <input type="radio" name="section1a" id="radio1-2" value="radio" />
            <label class="large black" for="radio1-2">Account</label>
        </div>
        <div class="td td2"> <span class="large black">Name:</span> 
        </div>
        <div class="td td3">
            <input id="txtName" class="form-textbox" name="name" type="text" placeholder="Insert account name" />
        </div>
    </div>
    <div class="tr">
        <div class="td td1">
            <input type="radio" name="section1a" id="radio1-3" value="radio" />
            <label class="large black" for="radio1-3">General Business</label>
        </div>
        <div class="td td2"></div>
        <div class="td td3">
            <input class="form-textbox" name="organization" type="text" placeholder="Insert client organisation name" />
        </div>
    </div>
</div>

<script>
var rbProject = document.getElementById('radio1-1');
var rbAccount = document.getElementById('radio1-2');
var txtRef = document.getElementById('txtRef');
var txtTitle = document.getElementById('txtTitle');
var txtName = document.getElementById('txtName');


rbProject.addEventListener('change', function (e) {
    txtRef.disabled = false;
    txtTitle.disabled = false;
    txtName.disabled = true;
})

rbAccount.addEventListener('change', function (e) {
    txtRef.disabled = true;
    txtTitle.disabled = true;
    txtName.disabled = false;
})
</script>


</body>


</html>

Leo Lindhorst · Accepted Answer · 2015-05-09 04:21:39Z

1

OK, I figured it out ;) In jsfiddle you have the option "onload" in the sidebar, that causes, that the code is executed after the page loading has finished. In your code you have different options to achieve that. You can put your code at the end of the HTML document (after body) or (and that's my favorite method) you wrap your code in a function

function init() {
    //your JS code from above
}

And add these to the onload listener in the body tag with

<body onload="init();">

I think that should work, good luck :)

answered May 9, 2015 at 4:21

Leo Lindhorst

2322 silver badges8 bronze badges

Collectives™ on Stack Overflow

Javascript is not working and I cannot figure out why

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related