How to add a line break in oldschool javascript div
Question
I have to alter the following code somehow to add line breaks to the labels on the buttons generated by AddRemoteButtonText. Tried everything I found on this site, but nothing worked yet (most probably because I`m just starting out coding javascript). Mostly tried adding another variable to the function and then implementing it by "\\n" .
var size = 20;
var repeat_timer;
function AddRemoteButtonText(num, posx, posy, wx, wy, color, label, remote, command, initial_delay, repeat_delay)
{
document.write('<div id="' + num + '" class="button ' + color + '" style="position:absolute; top:' + posy + 'px; left:' + posx + 'px; height:' + wy + 'px; width:' + wx + 'px; line-height: ' + wy + 'px;" align="center">' + label + '</div>');
document.getElementById(num).onmouseup = function () { SendIRCommand (num,remote,command,initial_delay,repeat_delay); EndSendCommand (num) };
document.getElementById(num).onmouseleave = function () { EndSendCommand (num) };
}
}
};
Thanks for your answer!
2 answers
solution1
0 2018-04-17 00:14:09
像下面的示例一样添加'<br>'
document.write(variable +'<br/>'+ variable2);
solution2
0 2018-04-17 01:51:51
I would probably do it like this (simplified for example purposes):
var i = 0; var aboveLineBreak; var belowLineBreak; function AddRemoteButtonText() { console.log(i); //define some text to print to the button aboveLineBreak = "above br" + i; belowLineBreak = "below br" + i; //create a button object var btn = document.createElement("DIV"); //add our text, including the line break, to the button btn.appendChild(document.createTextNode(aboveLineBreak)); btn.appendChild(document.createElement("BR")); btn.appendChild(document.createTextNode(belowLineBreak)); //define our button's CSS style btn.setAttribute("class", "button red"); //to set the position, do: //btn.style.position = "absolute"; //btn.style.top = whatever; //and so on... //add listeners if needed... btn.onmouseup = function () { console.log("foo"); }; //finally add the button to the document's body and increment i document.body.appendChild(btn); i++; }
.button { width: 33%; height: 45px; } .red { background-color: darkred; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <button onClick="AddRemoteButtonText();"> Add Remote Button Text </button> </body> </html>
Not the most beautiful buttons, but if you simply substitute my CSS with your own you should have a working line break. If not, we will need you to post your CSS so we can have a look at it.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.