Попытка сделать другой HTML абзац в зависимости от выбора - PullRequest
0 голосов
/ 30 января 2020

Итак, у меня есть этот модал, который должен обеспечивать другой описательный абзац в зависимости от того, какой выбор пользователь сделал из выпадающего списка. В настоящее время он просто показывает все абзацы в любое время. Я хочу, чтобы он отображал «Скрыть» при выборе Publi c, «Скрыть 2» при выборе «Внутренний». Et c. Et c.

<html> 
<head>  
<script type="text/javascript">

 function CheckSelect(val){
 var PUBLIC=document.getElementById('Hide');
 var INTERNAL=document.getElementById('Hide2');
 var CONFIDENTIAL=document.getElementById('Hide3');
 var SECRET=document.getElementById('Hide4');

 if(val=='PUBLIC')
   PUBLIC.style.display='block';
 else if (val=='INTERNAL')
   INTERNAL.style.display='block';
    else if (val=='CONFIDENTIAL')
   CONFIDENTIAL.style.display='block';
    else if (val=='SECRET')
   SECRET.style.display='block';
   else 
   PUBLIC.style.display='none';

}

</script> 
</head>
<body>
<select id="selectDocumentType" name="documentClass" onchange='CheckSelect(this.value);'>
  <option value="Choose">Choose a classification!</option>
  <option value="PUBLIC">Public</option>
  <option value="INTERNAL">Internal</option>
  <option value="CONFIDENTIAL">Confidential</option>
  <option value="SECRET">Secret</option>
  </select>
<p align="justify" style="font-family:helvetica,garamond,serif;font-size:12px;font-style:regular;" class="light"
         id="Hide" style='display:none;'>Wizard Is working</p>
<p align="justify" style="font-family:helvetica,garamond,serif;font-size:12px;font-style:regular;" class="light"
         id="Hide2" style='display:none;'>Wizard Is Twerking</p>         
<p align="justify" style="font-family:helvetica,garamond,serif;font-size:12px;font-style:regular;" class="light"
         id="Hide3" style='display:none;'>Wizard Is Laughing</p>
<p align="justify" style="font-family:helvetica,garamond,serif;font-size:12px;font-style:regular;" class="light"
         id="Hide4" style='display:none;'>Wizard Is Eating</p>  
</body>

Ответы [ 3 ]

1 голос
/ 30 января 2020

В вашем коде отсутствует лог c 'если выбрано соответствующее значение, не скрывайте, иначе скрывайте'; т. е. ваше if утверждение неверно.

При этом лучше заменить его на classList.toggle('show', <predicate>, чтобы избежать повторения (4 раза) по существу того же оператора if / else.

Там Есть куча других проблем с вашим кодом в отношении читабельности и лучших практик. Я не буду перечислять их все, но ниже приведено то, к чему вы должны стремиться.

const $ = document.querySelector.bind(document);

$('#selectDocumentType').addEventListener('change', () => {
	[
		['public', 'hide'],
		['internal', 'hide2'],
		['confidential', 'hide3'],
		['secret', 'hide4'],
	].forEach(([value, elId]) => $(`#${elId}`).classList.toggle('show', value === $('#selectDocumentType').value));
});
p.light {
  font-family: helvetica, garamond, serif;
  font-size: 12px;
  font-style: normal;
  display: none;
}

p.show {
  display: block;
}
<select id="selectDocumentType" name="documentClass">
	<option value="Choose">Choose a classification!</option>
	<option value="public">Public</option>
	<option value="internal">Internal</option>
	<option value="confidential">Confidential</option>
	<option value="secret">Secret</option>
</select>
<p class="light hidden" id="hide">Wizard Is working</p>
<p class="light hidden" id="hide2">Wizard Is Twerking</p>
<p class="light hidden" id="hide3">Wizard Is Laughing</p>
<p class="light hidden" id="hide4">Wizard Is Eating</p>

Редактирование, практика чистого кода:

1) Используйте document.querySelector вместо document.getElementById, поскольку он более универсален. Это часто связано с $ для меньшего набора текста.

2) Используйте let & const вместо var для объявления переменных. Используйте имена переменных в верхнем регистре только для const с и в нижнем регистре для не const с.

3) Используйте операторы switch вместо повторяющихся if/else, сравнивая одну и ту же переменную на равенство.

4) Используйте === вместо ==.

5) Правильно отформатируйте код. Например, отступы и пробелы вокруг операторов.

6) Предпочитать функции стрелок () => {} вместо ключевого слова function.

7) Использовать element.addEventListener('event') в JS вместо onevent in HTML.

8) Не используйте заглавные буквы HTML (например, ID, классы и т. д. c). Используйте регистр da sh, например, id="min-value-input".

9) Для тегов <p> нет атрибута align.

10) Не используйте атрибут style в HTML. Аналогично, не устанавливайте style свойства в JS. Вместо этого используйте атрибут class в HTML, а element.classList.add|remove|toggle в JS.

11) regular - недопустимое значение CSS font-style. Вы, вероятно, имели в виду normal.

1 голос
/ 30 января 2020

Вещи, которые я изменил в вашем коде:

  • Добавлен новый тег класса в вашем <p> tag "work"
  • Добавлена ​​ общая функция чтобы скрыть все предметы класса работа
  • Я обновил идентификатор вашего <p> tag as the value in option
  • 3-й шаг помог мне просто передать значение, чтобы установить видимость требуемого <p> tag

<html> 
<head>  
<script type="text/javascript">

function HideAll(val)
{
	var all = document.getElementsByClassName(val);
 	for(var i =0; i<all.length; i++)
 		all[i].style.display = 'none';
}
 function CheckSelect(val){
 
 	HideAll('work');
	document.getElementById(val).style.display='block';
 

}

</script> 
</head>
<body>
<select id="selectDocumentType" name="documentClass" onchange='CheckSelect(this.value);'>
  <option value="Choose">Choose a classification!</option>
  <option value="PUBLIC">Public</option>
  <option value="INTERNAL">Internal</option>
  <option value="CONFIDENTIAL">Confidential</option>
  <option value="SECRET">Secret</option>
  </select>
<p align="justify" style="font-family:helvetica,garamond,serif;font-size:12px;font-style:regular;display:block;" class="light work"
         id="Choose" >Please Choose any one</p>
<p align="justify" style="font-family:helvetica,garamond,serif;font-size:12px;font-style:regular;display:none;" class="light work"
         id="PUBLIC" >Wizard Is working</p>
<p align="justify" style="font-family:helvetica,garamond,serif;font-size:12px;font-style:regular;display:none;" class="light work"
         id="INTERNAL" >Wizard Is Twerking</p>         
<p align="justify" style="font-family:helvetica,garamond,serif;font-size:12px;font-style:regular;display:none;" class="light work"
         id="CONFIDENTIAL" >Wizard Is Laughing</p>
<p align="justify" style="font-family:helvetica,garamond,serif;font-size:12px;font-style:regular;display:none;" class="light work"
         id="SECRET" >Wizard Is Eating</p>  
</body>
</html>

You should keep the styles commonly in styles since it's repeated

1 голос
/ 30 января 2020

Не изменяя слишком много вашего исходного кода, просто установите другие элементы для отображения none, когда вы установите для определенного значения display в ваших if-else выражениях. Также удалите дополнительные атрибуты style в вашем коде html, где у вас есть display:none, и добавьте его к первому атрибуту style в теге p. Надеюсь, это поможет

<html> 
<head>  
<script type="text/javascript">

 function CheckSelect(val){
 var PUBLIC=document.getElementById('Hide');
 var INTERNAL=document.getElementById('Hide2');
 var CONFIDENTIAL=document.getElementById('Hide3');
 var SECRET=document.getElementById('Hide4');

 if(val=='PUBLIC'){
   PUBLIC.style.display='block';
   INTERNAL.style.display='none';
   CONFIDENTIAL.style.display='none';
   SECRET.style.display='none';
   }
 else if (val=='INTERNAL'){
   INTERNAL.style.display='block';
   PUBLIC.style.display='none';
   CONFIDENTIAL.style.display='none';
   SECRET.style.display='none';
   }
 else if (val=='CONFIDENTIAL'){
   CONFIDENTIAL.style.display='block';
   PUBLIC.style.display='none';
   INTERNAL.style.display='none';
   SECRET.style.display='none';
   }
 else if (val=='SECRET'){
   SECRET.style.display='block';
   PUBLIC.style.display='none';
   INTERNAL.style.display='none';
   CONFIDENTIAL.style.display='none';
   }
 else {
   PUBLIC.style.display='none';
   SECRET.style.display='none';
   INTERNAL.style.display='none';
   CONFIDENTIAL.style.display='none';
   }
}

</script> 
</head>
<body>
<select id="selectDocumentType" name="documentClass" onchange='CheckSelect(this.value);'>
  <option value="Choose">Choose a classification!</option>
  <option value="PUBLIC">Public</option>
  <option value="INTERNAL">Internal</option>
  <option value="CONFIDENTIAL">Confidential</option>
  <option value="SECRET">Secret</option>
  </select>
<p align="justify" style="font-family:helvetica,garamond,serif;font-size:12px;font-style:regular;display:none;" class="light"
         id="Hide" >Wizard Is working</p>
<p align="justify" style="font-family:helvetica,garamond,serif;font-size:12px;font-style:regular;display:none;" class="light"
         id="Hide2">Wizard Is Twerking</p>         
<p align="justify" style="font-family:helvetica,garamond,serif;font-size:12px;font-style:regular;display:none;" class="light"
         id="Hide3">Wizard Is Laughing</p>
<p align="justify" style="font-family:helvetica,garamond,serif;font-size:12px;font-style:regular;display:none;" class="light"
         id="Hide4">Wizard Is Eating</p>  
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...