Javascript кнопка с CSS

0

РЕДАКТИРОВАТЬ:

В настоящее время, используя этот код javascript, он работает на поле плюс, но не на минус. (измененный фрагмент кода из ниже.

// Create buttons for creating and removing inputs
var newAddButton = document.createElement('input');
newAddButton.id= "submit2";
newAddButton.type = "button";
newAddButton.value = " + ";


var newDelButton = document.createElement('input');
newDelButton.type = "button";
newDelButton.value = " - ";
newAddButton.id= "submit2";

У меня есть форма javascript, две кнопки и форма создается при нажатии кнопки "Плюс", мне просто интересно, можно ли установить кнопки в том же стиле CSS, что и кнопка рядом с раскрывающимися списками.

Короче говоря, стиль css, прикрепленный к кнопкам, созданным через javascript

HTML

<div id="mainContainer">
  <div>
    <select name="text[]">
      <option value="t1">t1</option>
      <option value="t2">t2</option>
      <option value="t3">t3</option>
    </select>
    <input name="none" type="button" id="submit2" onClick="addNew();" value=" + ">
  </div>
</div>       

JAVASCRIPT

var counter = 0;

function addNew(e) {

  var countAll = document.getElementsByTagName("select").length - 1;

  var lastSelectBox = document.getElementsByTagName("select")[countAll];

  var items = lastSelectBox.innerHTML;

  // Get the main Div in which all the other divs will be added
  var mainContainer = document.getElementById('mainContainer');

  // Create a new div for holding text and button input elements
  var newDiv = document.createElement('div');

  // Create a new text input

  var newText = document.createElement('select');
  newText.type = "select"; 
  newText.setAttribute("name", "text[]");

  newText.innerHTML = items;

  //for testing

  // Create buttons for creating and removing inputs
  var newAddButton = document.createElement('input');
  newAddButton.type = "button";
  newAddButton.value = " + ";

  var newDelButton = document.createElement('input');
  newDelButton.type = "button";
  newDelButton.value = " - ";

  // Append new text input to the newDiv
  newDiv.appendChild(newText);

  // Append new button inputs to the newDiv
  newDiv.appendChild(newAddButton);
  newDiv.appendChild(newDelButton);

  // Append newDiv input to the mainContainer div
  mainContainer.appendChild(newDiv);

  // Add a handler to button for deleting the newDiv from the mainContainer
  newAddButton.onclick = addNew;

  newDelButton.onclick = function() {
    mainContainer.removeChild(newDiv);
  };
};
  • 0
    Тип ввода - «отправить», а не «кнопка».
  • 0
    Пожалуйста, разместите относительный HTML & CSS или создайте скрипку .
Показать ещё 3 комментария
Теги:

1 ответ

0

С скрипкой есть что-то не так.

  1. Чтобы исключить ваш вопрос, CSS имеет посторонний }, что приводит к игнорированию стиля для #submit3. Убери это.
  2. Javascript в скрипке не должен быть обернут обработчиком onload; установите "Нет обертывания в голову" или "Без обертывания в теле". В противном случае нажатие кнопки не будет работать.
  3. У вновь созданных кнопок есть одинаковые IDS. Это не-нет. Сделайте Javascript помните, сколько кнопок есть и дайте им уникальный идентификатор, основанный на счете. (Что-то вроде ++numberofbuttons; id = 'submit'+(numberofbuttons*2); для одного и того же плюс +1 для другого.)
  4. О, и ваша скрипка отличается от кода примера в вопросе. Не делай этого.

Ещё вопросы

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