Javascript不起作用，我不知道为什么

user1664305 发表于 Dev

用户名

我从jsfiddle分叉了一些代码，当我将其放入html文档时，它无法正常工作。但是在小提琴中效果很好。某件事告诉我，我缺少一个库，但不确定应该使用哪个库。

如果它实际上在工作，应该发生的是一个文本框，如果选择了另一个单选按钮，则应禁用然后再启用两个。

小提琴可以在这里找到：http : //jsfiddle.net/t5xKW/3/

任何帮助，将不胜感激。

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

发送

在执行javascript之前未呈现HTML。将您的脚本放在关闭body标签（</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>