отображать слова в произвольном положении при нажатии - PullRequest
Новая
       54

отображать слова в произвольном положении при нажатии

0 голосов
/ 23 мая 2018

Я впервые публикую что-то на форуме.Я новичок в javascript.

Я нашел это: http://jsfiddle.net/6eTcD/2/ Вы вводите слово и отправляете его, а затем оно случайно появляется на странице.

HTML: 

<form>
    <input type="text">
    <input type="submit">
</form>

JAVASCRIPT 

document.querySelector("form").addEventListener("submit", function(e) {
    e.preventDefault();

    var fullWidth = window.innerWidth;
    var fullHeight = window.innerHeight;

    var text = this.querySelector("input[type='text']").value;

    var elem = document.createElement("div");
    elem.textContent = text;
    elem.style.position = "absolute";
    elem.style.left = Math.round(Math.random() * fullWidth) + "px";
    elem.style.top = Math.round(Math.random() * fullHeight) + "px";
    document.body.appendChild(elem);
});

Хотя я хотел бы сам выбрать слова, которые будут отображаться, и я хотел бы, чтобы они появлялись при нажатии кнопки.И в случайных позициях.но не случайные слова.

Я пытался заменить «текст» на «слова» и добавил 

    function getRandomWord() {
  var words = [
    'Hello',
    'No',
    'Hi',
    'Banana',
    'Apple'
  ];

МОИ ИЗМЕНЕНИЯ: 

// A $( document ).ready() block.
$( document ).ready(function() {


document.querySelector("form").addEventListener("submit", function(e) {
    e.preventDefault();

    var fullWidth = window.innerWidth;
    var fullHeight = window.innerHeight;

    function getRandomWord() {
  var words = [
    'Hello',
    'No',
    'Hi',
    'Banana',
    'Apple'
  ];

    var elem = document.createElement("div");
    elem.textContent = words;
    elem.style.position = "absolute";
    elem.style.left = Math.round(Math.random() * fullWidth) + "px";
    elem.style.top = Math.round(Math.random() * fullHeight) + "px";
    document.body.appendChild(elem);
});

    });

В любом случае яне думай, что то, что я сделал, могло бы сработать.Я новичок в этом.Будет ли кто-нибудь из вас сейчас?
Заранее спасибо

Ответы [ 6 ]

0 голосов
/ 23 мая 2018

Попробуйте эту функцию, у написанной вами функции были некоторые основные синтаксические и логические проблемы.Также на данный момент печатает все элементы массива слов.Вы можете извлечь случайный индекс и напечатать это индексированное слово, если хотите.

Рабочая скрипка 

var fullWidth ;
var fullHeight;
var words = [
    'Hello',
    'No',
    'Hi',
    'Banana',
    'Apple'
  ];
function getRandomWord() {
    var random = Math.floor( words.length * Math.random());
    var randomWord = words[random];  

    var elem = document.createElement("div");
    elem.classList = "abc";
    elem.textContent = randomWord;
    elem.style.position = "absolute";
    elem.style.left = Math.round(Math.random() * fullWidth) + "px";
    elem.style.top = Math.round(Math.random() * fullHeight) + "px";
            $(".abc").remove();
    document.body.appendChild(elem);
};
// A $( document ).ready() block.
$( document ).ready(function() {


document.querySelector("form").addEventListener("submit", function(e) {
    e.preventDefault();

     fullWidth = window.innerWidth;
     fullHeight = window.innerHeight;

    getRandomWord();

    });
});
0 голосов
/ 23 мая 2018

Вы на правильном пути здесь.Первая часть, в которую вы должны заглянуть глубже, это ваша функция getRandomWord.В javascript нет такой вещи, как неявные возвраты, что означает, что вам действительно нужно выбрать что-то возвращать.Это означает, что вам действительно нужно набрать слово return

    function getRandomWord() {
    var words = [
      'Hello',
      'No',
      'Hi',
      'Banana',
      'Apple'
    ];
    return words[Math.floor(Math.random() * words.length)]
 }


var text = getRandomWord();

Далее в своем решении вы добавили, что elem.textContent = words; Это не будет работать, поскольку, как вы его определили, wordsна самом деле массив.Существует несколько способов сделать это, но один из них - назначить elem.textContent = getRandomWord().

Теперь, когда вы назначаете текстовое содержимое для своей функции getRandomWord (), getRandomWord будет запускаться (или выполняться),и назначит вашему тексту любое слово из getRandomWord.

Надеюсь, это поможет!

0 голосов
/ 23 мая 2018

Решение для печати слов одно за другим, а не случайно. 

var words = [
  'Hello',
  'No',
  'Hi',
  'Banana',
  'Apple'
];
var visible = 0;

document.querySelector("form").addEventListener("submit", function(e) {
    e.preventDefault();

    var fullWidth = window.innerWidth;
    var fullHeight = window.innerHeight;

    var elem = document.createElement("div");
    elem.textContent = words[visible];
    elem.style.position = "absolute";
    elem.style.left = Math.round(Math.random() * fullWidth) + "px";
    elem.style.top = Math.round(Math.random() * fullHeight) + "px";
    document.body.appendChild(elem);
    
    visible++;
});
<form>
    <input type="submit">
</form>
0 голосов
/ 23 мая 2018

Рабочий пример: JSFiddle 

var allWords = [
  'Hello',
  'No',
  'Hi',
  'Banana',
  'Apple'
]; 

function getRandomWord(words) {
  var randomIndex = Math.floor(Math.random() * words.length);
  return words[randomIndex];
}

document.querySelector("form").addEventListener("submit", function(e) {
    e.preventDefault();

    var fullWidth = window.innerWidth;
    var fullHeight = window.innerHeight;

    var elem = document.createElement("div");
    elem.textContent = getRandomWord(allWords);

    elem.style.position = "absolute";
    elem.style.left = Math.round(Math.random() * fullWidth) + "px";
    elem.style.top = Math.round(Math.random() * fullHeight) + "px";
    document.body.appendChild(elem);
});
0 голосов
/ 23 мая 2018

Вам просто нужно создать функцию, которая даст вам случайное значение из массива. 

function getRandomWord(){
  var words = [
    'Hello',
    'No',
    'Hi',
    'Banana',
    'Apple'
  ];

  return words[Math.floor(Math.random() * words.length)];
}

И как вызывается, когда ваш обработчик кликов сработает, просто отобразите значение, возвращаемое этим методом

Вот фрагмент

0 голосов
/ 23 мая 2018

Вы можете использовать items[Math.floor(Math.random()*items.length)] для выбора случайного элемента из массива items.

Я использовал код, который вы указали в ссылке JSFiddle: 

document.querySelector("form").addEventListener("submit", function(e) {
    e.preventDefault();
    
    var fullWidth = window.innerWidth;
    var fullHeight = window.innerHeight;
    
    var items = ['nothing', 'banana', 'apple', 'rasberry']
    var item = items[Math.floor(Math.random()*items.length)];
    
    var elem = document.createElement("div");
    elem.textContent = item;
    elem.style.position = "absolute";
    elem.style.left = Math.round(Math.random() * fullWidth) + "px";
    elem.style.top = Math.round(Math.random() * fullHeight) + "px";
    document.body.appendChild(elem);
});
<form>
    <input type="submit">
</form>

Вместо поиска строки, находящейся в поле ввода, строка будет случайным образом извлечена из массива предопределенных строк items.

...