試圖換行符按鈕和項目

這裏是我使用的代碼（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);

我希望能夠產生反對它旁邊的按鈕下方的項目。我怎樣才能做到這一點？作爲獎勵，我也想知道如何格式化項目的字體，而不必編輯每個項目。

來源

2013-10-29 CCC

這是你想要的嗎？ http://jsbin.com/ESOdELU/6/edit – Rhyono

@Rhyono它對你添加的一行代碼提供的鏈接效果很好，但是當我將它添加到我的腳本時，它仍然會將該項放到按鈕的左側不幸。 – CCC

另外，我可以添加到代碼中的項目的最大數量是多少，我剛剛添加了大約200個，我不得不刪除一些腳本以在我的網站上工作。有限制嗎？ – CCC

這裏是你的代碼與大家要求的變化：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);

你可以使用一個類上的跨度，或者如果你想繼續在JS中完全包含它，建立在藍色字體顏色給你的例子上。

來源

2013-10-29 04:47:19 Rhyono

你有幾個選項可以在按鈕下方找到該行。可以交換跨度一個div和跨度

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

另一種選擇是改變你的HTML，並添加換行符，或給跨度顯示器前添加按鈕：塊屬性。

如果您真的不想交換將按鈕和元素添加到DOM的順序，則可以使用位置來移動它們。 http://www.w3schools.com/css/css_positioning.asp

因此，例如，你可以添加這個CSS

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

來源

2013-10-29 04:27:34

試圖換行符按鈕和項目

回答

相關問題