Javascript не работает, и я не могу понять, почему

Я разветвил некоторый код из jsfiddle, и когда я поместил его в html-документ, он не работает должным образом. Но отлично работает в скрипке. Что-то говорит мне, что я пропускаю библиотеку, но не знаю, какой из них я должен использовать.Javascript не работает, и я не могу понять, почему

Что должно происходить, если оно действительно работает, текстовое поле или два должны быть отключены, а затем включены, если выбран другой переключатель.

Fiddle можно найти здесь: 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>

источник

2015-05-09 user1664305

есть ли ошибки в консоли браузера? –

Вы отметили это с помощью jQuery, но я не вижу (1) никакого кода jQuery или (2), где вы включаете jQuery. –

Атрибут 'language' устарел. Используйте 'type =" text/javascript "' –

HTML не отображается перед выполнением javascript. Поместите свой сценарий как раз перед закрытием тела тега (</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>

источник

2015-05-09 04:17:04 pSaadi

ОК, я понял это;) В jsfiddle у вас есть опция «OnLoad» на боковой панели, что вызывает, что код выполняется после завершения загрузки страницы. В вашем коде у вас есть разные варианты для достижения этого. Вы можете поместить свой код в конец HTML-документа (после того, как тело) или (и это мой любимый метод) вы обернуть свой код в функции

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

И добавить их к OnLoad слушателя в теге тела с

<body onload="init();">

Я думаю, что должно работать, удачи :)

источник

2015-05-09 04:21:39 DevWurm

Javascript не работает, и я не могу понять, почему

ответ

Смежные вопросы