堆棧內存溢出
  簡體   English   中英

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

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

 原文  2015-05-09 04:11:25  3   2    javascript/ html

問題描述

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

2 個解決方案

解決方案1
 3 已采納  2015-05-09 04:17:04

在執行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>

解決方案2
 1  2015-05-09 04:21:39

好的，我發現了；）在jsfiddle中，邊欄中有選項“ onload”，這導致代碼在頁面加載完成后執行。 在您的代碼中，您可以選擇不同的方法來實現。 您可以將代碼放在HTML文檔的末尾（在正文之后），或者（這是我最喜歡的方法），將代碼包裝在一個函數中 

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

並將它們添加到body標簽中的onload偵聽器中 

<body onload="init();">

我認為應該可以，祝您好運:)

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 無法弄清楚為什么這不起作用 為什么我的JavaScript不起作用？ 我的RegEx似乎很麻煩，但我無法弄清楚 JavaScript 排序 function 沒有排序，我不知道為什么 無法弄清楚為什么提交按鈕不起作用 我不明白為什么這個簡單的Javascript無法使用。 誰能闡明一些想法？ 我無法弄清楚為什么我的 html 頁面沒有運行我的外部 javascript 文件 我的 javascript 驗證剛剛停止工作，我不知道為什么 我的javascript函數似乎無法正常工作。 我不知道為什么 編碼新手，我不明白為什么我的 javascript 按鈕無法正常工作？ 無法弄清楚為什么我的腳本停止工作。 。
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM