Inline CSS not working for inputs generated by JS

Question

I cannot seem to adjust the width of my input and select tags. I have enqueued the JS file properly. Nothing I do changes the format of the inputs or select tags and there is an unwanted line break in between each of my inputs. Here is what I am working with.

for (let i=0;i<eventsEntered && i<40;i++) {
    formBlanks = formBlanks + "<input type = "text" class = "formField" id ="eventName${i}" placeholder="Event Name">
    <select class = "raceType" id = "raceType${i}" style ="width: 30%;">   <option value="Road Race">Road Race</option>   <option value="Criterium">Criterium</option> <option value="GC">GC</option></select>
    <input  type = "text" id = "place${i}" placeholder = "Place" style= "width: 150px;">
    <input type = "text" id="fieldSize${i}" placeholder = "Field Size" style ="width: 100px;">
    <p style="display:inline" id="points${i}"></p><br> ";
};//this loop creates a string variable that holds the html code for each individual row of the event forms
    formBlanks = formBlanks + "<button onclick="eventCalc()">Calculate</button> <p id="catUp"></p>";
    document.getElementById("jsOut").innerHTML = formBlanks;
    formBlanks = "";
}

Image of inputs on site

Do you want the two inputs "Place" and "Field Size" side by side? Or each group (Race,Place,Size) side by side? Your question is very unclear. — H. Figueiredo
– H. Figueiredo, Commented Feb 22, 2019 at 17:05
can you create a fiddle of sandbox of non-working code. here question doesn't look to be clear enough — Gaurav Saraswat
– Gaurav Saraswat, Commented Feb 22, 2019 at 17:06

Joshua Vega · Accepted Answer · 2019-02-22 17:27:31Z

You're using double quotes inside double quotes which means you're opening and closing the string. Javascript support both double quotes (") and single quotes (') as well as back-ticks (`) for string representation while HTML only supports double quotes. Since you're using string interpolation through ${}, you need to use the back-ticks.

Below is a fixed version of your code that should work:

for (let i=0;i<eventsEntered && i<40;i++) {
    formBlanks = formBlanks + `<input type = "text" class = "formField" id ="eventName${i}" placeholder="Event Name">
    <select class = "raceType" id = "raceType${i}" style ="width: 30%;">   <option value="Road Race">Road Race</option>   <option value="Criterium">Criterium</option> <option value="GC">GC</option></select>
    <input  type = "text" id = "place${i}" placeholder = "Place" style= "width: 150px;">
    <input type = "text" id="fieldSize${i}" placeholder = "Field Size" style ="width: 100px;">
    <p style="display:inline" id="points${i}"></p><br> `;
};//this loop creates a string variable that holds the html code for each individual row of the event forms

formBlanks = formBlanks + `<button onclick="eventCalc()">Calculate</button> <p id="catUp"></p>`;
document.getElementById("jsOut").innerHTML = formBlanks;
formBlanks = "";

However, IE does not support backticks meaning that you will need to use string concatenation everywhere you have the variable i in your string.

Collectives™ on Stack Overflow

Inline CSS not working for inputs generated by JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related