Question

以下是我正在使用的代码（http://jsbin.com/ESOdELU/1/edit） -

var wordRandomizer = {
run : function(targetElem) {
var markup = this.createMarkup();
targetElem.appendChild(markup);
},
createMarkup : function() {
var that = this;
var frag = document.createDocumentFragment();

this.elem = document.createElement('span');

var button = document.createElement('button');
button.innerText = 'Change Item';
button.addEventListener('click', function() {
  that.changeItem();
});

frag.appendChild(this.elem);
frag.appendChild(button);

return frag;
},
changeItem : function() {
var rand = this.getRandInt(1, this.items.length) - 1;
console.log(rand);
this.elem.innerText = this.items[rand];
},
getRandInt : function(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
},
items : [
'itemA',
'itemB',
'itemC',
'itemD'
]
};

wordRandomizer.run(document.body);

我希望能够在旁边的按钮下方生成项目。我怎样才能做到这一点？作为奖励，我还想知道如何格式化项目的字体而无需编辑每个项目。

Answer 1

您可以在按钮下方找到该行。您可以将范围交换为div，并在范围

之前添加按钮

frag.appendChild(button);
frag.appendChild(this.elem);

另一种选择是更改你的html并添加换行符或给span一个display：block属性。

如果你真的不想交换将按钮和元素添加到DOM的顺序，可以使用position来移动它们。 http://www.w3schools.com/css/css_positioning.asp

所以例如你可以添加这个css

span : {
     display : block;
     font-family : // list of fonts ;
}

Answer 2

以下是您要求的所有更改的代码：http://jsbin.com/ESOdELU/8/edit

var wordRandomizer = {
  run : function(targetElem) {
    var markup = this.createMarkup();
    targetElem.appendChild(markup);
  },
  createMarkup : function() {
    var that = this;
    var frag = document.createDocumentFragment();

    this.elem = document.createElement('span');
    this.elem.style.color = "blue";

    var button = document.createElement('button');
    var br = document.createElement("br");
    button.innerText = 'Change Item';
    button.addEventListener('click', function() {
      that.changeItem();
    });

    frag.appendChild(button);
    frag.appendChild(br);
    frag.appendChild(this.elem);    

    return frag;
  },
  changeItem : function() {
    var rand = this.getRandInt(1, this.items.length) - 1;
    console.log(rand);
    this.elem.innerText = this.items[rand];
  },
  getRandInt : function(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  },
  items : [
    'itemA',
    'itemB',
    'itemC',
    'itemD'
  ]
};

wordRandomizer.run(document.body);

你可以在span上使用一个类，或者如果你想继续在JS中完全包含它，那么建立在我给你的蓝色字体颜色的例子上。

尝试换行按钮和项目

2 个答案: