Нужно динамически вставить форму, используя Javascript

0

есть ли такой способ? У меня был небольшой успех в использовании метода.innerHTML.

В каком-то контексте я новичок в Javascript, и я пытаюсь сделать текстовую RPG как забавный проект, используя то, что я знаю в HTML, CSS и Javascript... Последнее из которых у меня не было слишком много опыта.

Функция должна будет изменить элемент, вставив фрагмент, который запрашивает имя для символа, и форму вместе с кнопкой отправки... Затем возьмите то, что они вводят и изменяют переменную JSON, которая по существу будет функционировать как символ файл.

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

  • 1
    Вы можете использовать DOM, чтобы сделать это, но, возможно, было бы более уместным просто иметь форму как часть вашего HTML и показывать или скрывать ее, используя display в зависимости от ситуации.
  • 0
    JavaScript может делать все с домом. Для вашей цели я полностью не согласен с @rninty. Сгенерируйте все с помощью js и позвольте странице сгенерировать что-то простое, например myRPG.init(someElement); и он создаст всю игру в этот элемент на странице. Чтобы сделать это хорошо, вам нужно многому научиться. Объектно-ориентированное программирование является ключом.
Показать ещё 1 комментарий
Теги:

2 ответа

0

Ниже я написал несколько простых манипуляций с dom, которые создают форму, вход, а когда вход теряет фокус, сохраняет все, что находится во входном localStorage, в файл cookie или localStorage.

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

Вы можете узнать больше о localStorage здесь, здесь и здесь. Вы можете узнать больше о печенье здесь.

function init_form(){
    var form = document.createElement('form');
    var input = document.createElement('input');

    input.setAttribute('id', 'player_name');
    input.setAttribute('placeholder', ' Enter Characters Name');
    input.setAttribute('type', 'text');

    form.appendChild(input);
    document.appendChild(form); //or document.getElementsByTagName('body')[0].innerHTML += form;
    input.addEventListener('blur', store_name_in_local_storage, false); 
}

function store_name_in_local_storage(){
    var name = document.getElementById('player_name');

    //check to see if browser supports local storage if it does, use it, if it doesn't use cookies
    if(!window.localStorage){
        document.cookie = 'player_name ='+ name;
    }else{
        localStorage.setItem('player_name', name);
    }
}

function get_player_name(){
    var name = '';

    //retrieve the cookie or local storage name
    if(!window.localStorage){
        name = document.cookie
    }else{
        name = localStorage.getItem('player_name');
    }
}

Обратите внимание на ссылки: с вашего нового в javascript я бы использовал вторую ссылку на localStorage, первая - очень хорошая документация о том, как ее использовать, а третья - фактическая страница спецификации для этой функции.

Кроме того, я включил в себя код для настройки cookie, который должен быть тщательным, а не потому, что вам это действительно нужно. localStorage поддерживается полностью в IE8 и во всех других основных браузерах.

Если вы хотите проверить совместимость любой функции javascript/html5, я предлагаю здесь.

Удачи!

0

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

document.cookie='PlayerName = ThatOneGuy';

Более подробную информацию вы можете найти на странице https://developer.mozilla.org/en-US/docs/Web_Development/HTTP_cookies.

  • 0
    Это действительно отвечает на вопрос, хотя? И пожалуйста ... не W3Schools, пожалуйста .

Ещё вопросы

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