Javascript无法正常工作，我无法弄清楚原因

[英]Javascript is not working and I cannot figure out why

本文翻译自 user1664305 查看原文 2015/05/09 73 html/ javascript

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.

我从jsfiddle分叉了一些代码,当我把它放入html doc时,它无法正常工作。但在小提琴中工作得很好。有些东西告诉我,我错过了一个图书馆,但不确定我应该使用哪一个。

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/

小提琴可以在这里找到: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>

2 个解决方案

#1

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

在执行javascript之前,不会呈现HTML。在关闭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>

#2

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

好吧,我想通了;)在jsfiddle中,你在侧边栏中有选项“onload”,这导致代码在页面加载完成后执行。在您的代码中,您有不同的选择来实现这一目标。您可以将代码放在HTML文档的末尾(在正文之后)或(这是我最喜欢的方法)将代码包装在函数中

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

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

并将这些添加到body标签中的onload侦听器中

<body onload="init();">

I think that should work, good luck :)

我认为应该工作,祝你好运:)

智能推荐

注意！

本站翻译的文章，版权归属于本站，未经许可禁止转摘，转摘请注明本文地址：http://www.silva-art.net/blog/2015/05/09/3ffc795433d71a5c5e61ccf2c1fbbcc3.html。

猜您在找

我无法弄清楚为什么我的复制和粘贴不能正常工作？ - I cannot figure out why my copy and paste is not working VBA? 我收到了IllegalStateException：已经连接，我无法弄清楚原因 - I'm getting an IllegalStateException: Already connected and I cannot figure out why 添加到HIMageList失败，无法弄清楚原因 - Adding to HIMageList failing, cannot figure out why 计算不正确，无法弄清楚原因 - Calculation incorrect and can't figure out why ArgumentOutOfRangeException，我无法弄清楚为什么 - ArgumentOutOfRangeException and I can't figure out why

赞助商链接