CODEWITHSUNDEEP
javascripthtmlcssbutton
Nina
Nina

Reputation: 81

How to style (css) text that was entered in input field type=text and added with button?

I'm very new to web-design and programming and have a question. I'm working on developing a To-Do List with javascript, html and css and I was able to successfully connect an input field to an "Add"-button and have it so what is typed appears in a list when clicking the button. Now I want to style the text using css. How do I style the text from the input field? As I said, I want the text I entered to appear after I press the button in a list.

html: [1]: https://i.sstatic.net/ZXSAh.png

javascript:

function myFunction() {
var li = document.createElement("li");
var inputValue = document.getElementById("input").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === '') {
  alert("You must write something!");
} else {
  document.getElementById("myUL").appendChild(li);
}
document.getElementById("input").value = "";

var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
li.appendChild(span);

for (i = 0; i < close.length; i++) {
  close[i].onclick = function() {
    var div = this.parentElement;
    div.style.display = "none";
  }
}

}

Upvotes: 0

Views: 869

Answers (4)

FluffyKitten
FluffyKitten

Reputation: 14312

The best way to do this is to set up a reusable CSS class and apply this to the element you generate, e.g.

.newItem {
    color: blue;
}

(Note that using CSS rules for classes etc is almost always recommended over inline CSS - it is much easier to change, and reuse in other places for consistency.)

Then apply this to the li you create (or any of the other elements, e.g. the span, depending on what you want to style and how reusable you want the class to be), e.g.

function myFunction() {
  var li = document.createElement("li");

  // add class to the li
  li.classList.add("newItem");

  // REST OF YOUR CODE
}

If you want to style the span instead of the li for example, you can either add the class to the span, or change the CSS rule to target the span, e.g.

.newItem span { color:blue; }

(See how much easier it is to change when you use CSS! :) )

Working Example:

function myFunction() {
  var li = document.createElement("li");
  var inputValue = document.getElementById("input").value;
  var t = document.createTextNode(inputValue);
  li.appendChild(t);

  // add class to the li
  li.classList.add("newItem");

  if (inputValue === '') {
    alert("You must write something!");
  } else {
    document.getElementById("myUL").appendChild(li);
  }
  document.getElementById("input").value = "";

  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  li.appendChild(span);

  for (i = 0; i < close.length; i++) {
    close[i].onclick = function() {
      var div = this.parentElement;
      div.style.display = "none";
    }
  }
}
.newItem{ color:blue;}
<input type="text" id="input">
<span onclick="myFunction()" class="button">Add</span>

<ul id="myUL"></ul>

Upvotes: 1

Vencho
Vencho

Reputation: 163

SOLUTION:

For styling the content inside an input you have to use a color attribute like this one:

input { /*Selects input*/
color: green /*Changes the color to green*/

}
<input type="text" value="My text"/>

Upvotes: 0

Ammar Yasir
Ammar Yasir

Reputation: 54

Regarding your question: I want to style the text using css. How do I style the text from the input field?

<span onclick="myFunction()" class="button" style="color: orange; font-weight: bold;">Add</span>

You can style like this.

Upvotes: 0

mike.k
mike.k

Reputation: 3427

Style it on the span element.

For example, you can make it bold this way: span.style.fontWeight = 'bold';

Or set CSS on the close class you're using, by putting something like this in <head>:

<style>

span.close {
    font-weight: bold;
}

</style>

Upvotes: 0

Related Questions