Переменная в скрипте зависит от пользовательского ввода текстового поля

0

Я пытаюсь обновить var zz ниже тем, что пользователь вводит в текстовую область, когда он нажимает submit. Идея состоит в том, чтобы создать базовое облако слов, используя слова, которые пользователь представляет в форме.

<!DOCTYPE html>
<meta charset="utf-8">
<script src="../lib/d3/d3.js"></script>
<script src="../d3.layout.cloud.js"></script>
<body>
<script>
var fill = d3.scale.category20();
var zz= ["Hello", "world", "normally", "you", "want", "more", "words", "than", "this"];
d3.layout.cloud().size([300, 300])
    .words((zz).map(function(d) {
        return {text: d, size: 10 + Math.random() * 90};
    }))
    .rotate(function() { return ~~(Math.random() * 2) * 90; })
    .font("Impact")
    .fontSize(function(d) { return d.size; })
    .on("end", draw)
    .start();
........
</script>

<div style="text-align: center">
<div id="presets"></div>
<div id="custom-area">
  <p><label for="text">Enter some text.</label>
  <p><textarea id="text"></textarea>
  <button id="zz" type="submit">Go!</button>
</div>
</div>
  • 0
    Возьмите значение текстовой области при отправке или нажатии кнопки, разделите его на пробел и установите результат zz .
Теги:
d3.js
forms
text

1 ответ

0

Когда форма отправляется или нажимается кнопка, возьмите значение поля и разделите его пробелами:

На основе вашей веб-страницы примера у вас было несколько вопросов:

  • x не определен, я получил ошибку в консоли
  • Я не видел ни одного элемента с demo id, за ваш javascript

Здесь скрипка, показывающая простое демо.

function myFunction(){    
  var zz = document.getElementById("text").value.split(" ");
  document.getElementById("demo").innerHTML = zz;
}
Поделиться
  • 0
    Большое спасибо за быстрый ответ - я все еще не совсем там. Не могли бы вы взглянуть на это: jingletree.com/d3-cloud-master/examples/simple.html
  • 0
    Обновленный ответ с немного большей информацией. Если вы console.log(zz) вы увидите, что это на самом деле массив, несмотря на то, как он может выглядеть в HTML.
Показать ещё 8 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню