Как запустить выделение с помощью JavaScript на основе пользовательского ввода?

StackOverflow https://stackoverflow.com/questions/2467049

  •  20-09-2019
  •  | 
  •  

Вопрос

Я пытаюсь использовать JavaScript для запуска выделения, когда пользователь вводит свое имя в текстовое поле, а затем нажимает кнопку.У меня есть идея, как это сделать, но мой сценарий никогда не работает полностью.Любая помощь приветствуется!

Вот что у меня есть на данный момент:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
    function StartMarquee() {
        var text = document.getElementById(namebox);
        if (text != null) {
            document.write("<marquee behavior='scroll' direction='right'>Hello " + text + "!</marquee>");
        }
        else {
            alert("Enter your name first!!!");
        }
    } 
</script>
</head>
<body>
<table style="margin:0px auto 0px auto;">
<tr><td>Enter your name!</td>
<td><input type="text" id="namebox"/></td>
<td><input type="button" value="Enter" onclick="StartMarquee()"/></td></tr>
</table>
</body>
</html>
Это было полезно?

Решение

У вашего JavaScript есть несколько проблем.

  1. Вы передаете неопределенную переменную namebox к getElementById.Это нужно взять в кавычки ('namebox').
  2. Вам необходимо проверить значение text против пустой строки, а не null.
  3. Вам нужно использовать значение ввода (text.value в отличие от просто text) в элементе, который вы создаете.

Вот как будет выглядеть ваш код с этими исправлениями:

function StartMarquee() {
  var text = document.getElementById('namebox');
  if (text.value !== '') {
    document.write("<marquee behavior='scroll' direction='right'>Hello " + text.value + "!</marquee>");
  }
  else {
    alert("Enter your name first!!!");
  }
}

Еще несколько общих рекомендаций:

  1. Не используйте document.write.Вместо этого используйте методы DOM, чтобы создать новый элемент и вставить его в DOM.
  2. Используйте ненавязчивый JavaScript.Прикрепите свое поведение после загрузки документа вместо использования встроенных обработчиков событий.
  3. Использовать === и !== для условий, позволяющих избежать приведения типов и гарантировать, что вы получаете тот результат, о котором думаете.
  4. Никогда, никогда не используйте marquee.

Другие советы

var text = document.getElementById(namebox).value;

Вы, вероятно, не хотите использовать document.write для этого - используйте document.createElement('marquee') чтобы создать элемент, а затем добавить его в тело страницы.Вы можете установить атрибуты, такие как направление, для элемента, который вы возвращаете, и установить его innerHTML к тексту, который вы хотите в выделенной области.

(П.С.Шатер?Действительно?)

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top