Można i tak 
const n = 5;
const pattern = ('+-').repeat(Math.floor(n/2)+1);
for (let i=1; i<=n; i++) console.log(pattern.slice(0,i));
<input type="number" min="1" max="100" value="4">
<pre></pre>
input {
width: 3em;
}
pre {
width: 50vw;
padding: 0.5em;
}
const count = document.querySelector('input'),
view = document.querySelector('pre');
count.addEventListener('input', drawPattern);
function drawPattern({target}) {
const n = target.value;
const pattern = ('+-').repeat(Math.floor(n/2)+1);
view.textContent = '';
for (let i=1; i<=n; i++) {
//console.log(pattern.slice(0,i));
view.textContent += pattern.slice(0,i) + '\n';
}
}