Reputation: 179

Javascript is not working and I cannot figure out why

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>

Upvotes: 1

Answers (2)

pSaadi

Reputation: 300

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>

Upvotes: 3

Leo Lindhorst

Reputation: 232

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 :)

Upvotes: 1

Javascript is not working and I cannot figure out why

Answers (2)

Related Questions