html - How to set a color for a 'string' JavaScript

I want to be able to set a color for a color name, so if a user inputs the string 'green' the color would be a special green like #34ff8b.

I have already attempted using a variable and setting the color to the string 'green', but that is not valid js.

Desired Oute: User inputs a color name "green" and javascript uses a special color set in the js code.

const myButton = document.getElementById('myButton');
const myHeading = document.getElementById('myHeading');
const myTextInput = document.getElementById('myTextInput');


myButton.addEventListener('click', () => {
  myHeading.style.color = myTextInput.value;
} );

@import ':400,700';

body {
  color: #484848;
  font-family: 'Lato', sans-serif;
  padding: .45em 2.65em 3em;
  line-height: 1.5;
}
h1 {
  margin-bottom: 0;
}
h1 + p {
  font-size: 1.08em;
  color: #637a91;
  margin-top: .5em;
  margin-bottom: 2.65em;
  padding-bottom: 1.325em;
  border-bottom: 1px dotted;
}
ul {
  padding-left: 0;
  list-style: none;
}
li {
  padding: .45em .5em;
  margin-bottom: .35em;
  display: flex;
  align-items: center;
}
input,
button {
  font-size: .85em;
  padding: .65em 1em;
  border-radius: .3em;
  outline: 0;
}
input {
  border: 1px solid #dcdcdc;
  margin-right: 1em;
}
div {
  margin-top: 2.8em;
  padding: 1.5em 0 .5em;
  border-top: 1px dotted #637a91;
}
p.description,
p:nth-of-type(2) {
  font-weight: bold;
}
/* Buttons */
button {
  color: white;
  background: #1ad777;
  border: solid 1px;
  border-color: rgba(0, 0, 0, .1);
  cursor: pointer;
}
button + button {
  margin-left: .5em;
}
p + button {
  background: #52bab3;
}
.list button + button {
  background: #768da3;
}
.list li button + button {
  background: #508abc;
}
li button:first-child {
  margin-left: auto;
  background: #52bab3;
}
.list li button:last-child {
  background: #768da3;
}
li button {
  font-size: .75em;
  padding: .5em .65em;
}

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript and the DOM</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <h1 id="myHeading">JavaScript and the DOM</h1>
    <p>Making a web page interactive</p>
    <input type="text" id="myTextInput">
    <button id="myButton">change headline color</button>
    <script src="app.js"></script>
  </body>
</html>

I want to be able to set a color for a color name, so if a user inputs the string 'green' the color would be a special green like #34ff8b.

I have already attempted using a variable and setting the color to the string 'green', but that is not valid js.

Desired Oute: User inputs a color name "green" and javascript uses a special color set in the js code.

const myButton = document.getElementById('myButton');
const myHeading = document.getElementById('myHeading');
const myTextInput = document.getElementById('myTextInput');


myButton.addEventListener('click', () => {
  myHeading.style.color = myTextInput.value;
} );

@import 'https://fonts.googleapis./css?family=Lato:400,700';

body {
  color: #484848;
  font-family: 'Lato', sans-serif;
  padding: .45em 2.65em 3em;
  line-height: 1.5;
}
h1 {
  margin-bottom: 0;
}
h1 + p {
  font-size: 1.08em;
  color: #637a91;
  margin-top: .5em;
  margin-bottom: 2.65em;
  padding-bottom: 1.325em;
  border-bottom: 1px dotted;
}
ul {
  padding-left: 0;
  list-style: none;
}
li {
  padding: .45em .5em;
  margin-bottom: .35em;
  display: flex;
  align-items: center;
}
input,
button {
  font-size: .85em;
  padding: .65em 1em;
  border-radius: .3em;
  outline: 0;
}
input {
  border: 1px solid #dcdcdc;
  margin-right: 1em;
}
div {
  margin-top: 2.8em;
  padding: 1.5em 0 .5em;
  border-top: 1px dotted #637a91;
}
p.description,
p:nth-of-type(2) {
  font-weight: bold;
}
/* Buttons */
button {
  color: white;
  background: #1ad777;
  border: solid 1px;
  border-color: rgba(0, 0, 0, .1);
  cursor: pointer;
}
button + button {
  margin-left: .5em;
}
p + button {
  background: #52bab3;
}
.list button + button {
  background: #768da3;
}
.list li button + button {
  background: #508abc;
}
li button:first-child {
  margin-left: auto;
  background: #52bab3;
}
.list li button:last-child {
  background: #768da3;
}
li button {
  font-size: .75em;
  padding: .5em .65em;
}

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript and the DOM</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <h1 id="myHeading">JavaScript and the DOM</h1>
    <p>Making a web page interactive</p>
    <input type="text" id="myTextInput">
    <button id="myButton">change headline color</button>
    <script src="app.js"></script>
  </body>
</html>

Share Improve this question edited Sep 11, 2017 at 15:53 j08691 208k32 gold badges269 silver badges280 bronze badges asked Sep 11, 2017 at 15:47 hannacreed 6693 gold badges17 silver badges34 bronze badges

2 but that is not valid js Huh? – SLaks Commented Sep 11, 2017 at 15:48
var 'green' = #34ff8b; this is not valid. – hannacreed Commented Sep 11, 2017 at 15:50
The string green would actually be a valid value for element.style.color ? – adeneo Commented Sep 11, 2017 at 15:51
1 @hannacreed: What do you think that line would even mean? – SLaks Commented Sep 11, 2017 at 15:52
It sounds like you want to make a variable and an if statement to assign it. – SLaks Commented Sep 11, 2017 at 15:52

| Show 1 more ment

3 Answers 3

Sorted by: Reset to default 5

You'll need to store your supported colors in an Object or Array.

const colors = {
    green: '#34ff8b',
    red: '#someColorValue'
}

Then when you set the style of myHeading you could say:

myHeading.style.color = colors[myTextInput.value];

That would access the colors object and pull out the value that you have pre-set.

const myButton = document.getElementById('myButton');
const myHeading = document.getElementById('myHeading');
const myTextInput = document.getElementById('myTextInput');

const colors = {
  green: 'green',
  blue: 'blue',
  red: 'red'
}

myButton.addEventListener('click', () => {
  myHeading.style.color = colors[myTextInput.value];
} );

@import 'https://fonts.googleapis./css?family=Lato:400,700';

body {
  color: #484848;
  font-family: 'Lato', sans-serif;
  padding: .45em 2.65em 3em;
  line-height: 1.5;
}
h1 {
  margin-bottom: 0;
}
h1 + p {
  font-size: 1.08em;
  color: #637a91;
  margin-top: .5em;
  margin-bottom: 2.65em;
  padding-bottom: 1.325em;
  border-bottom: 1px dotted;
}
ul {
  padding-left: 0;
  list-style: none;
}
li {
  padding: .45em .5em;
  margin-bottom: .35em;
  display: flex;
  align-items: center;
}
input,
button {
  font-size: .85em;
  padding: .65em 1em;
  border-radius: .3em;
  outline: 0;
}
input {
  border: 1px solid #dcdcdc;
  margin-right: 1em;
}
div {
  margin-top: 2.8em;
  padding: 1.5em 0 .5em;
  border-top: 1px dotted #637a91;
}
p.description,
p:nth-of-type(2) {
  font-weight: bold;
}
/* Buttons */
button {
  color: white;
  background: #1ad777;
  border: solid 1px;
  border-color: rgba(0, 0, 0, .1);
  cursor: pointer;
}
button + button {
  margin-left: .5em;
}
p + button {
  background: #52bab3;
}
.list button + button {
  background: #768da3;
}
.list li button + button {
  background: #508abc;
}
li button:first-child {
  margin-left: auto;
  background: #52bab3;
}
.list li button:last-child {
  background: #768da3;
}
li button {
  font-size: .75em;
  padding: .5em .65em;
}

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript and the DOM</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <h1 id="myHeading">JavaScript and the DOM</h1>
    <p>Making a web page interactive</p>
    <input type="text" id="myTextInput">
    <button id="myButton">change headline color</button>
    <script src="app.js"></script>
  </body>
</html>

myButton.addEventListener('click', () => {
  if(myTextInput.value == 'green') {
    myHeading.style.color = "#34ff8b";
  } else {
    myHeading.style.color = myTextInput.value;
  }
} );

Simple solution, the other answers also are right.

https://jsfiddle/Cuchu/ownfby70/

Your code is good, but you need to validate the input somehow. You can do something like this.

const myButton = document.getElementById('myButton');
const myHeading = document.getElementById('myHeading');
const myTextInput = document.getElementById('myTextInput');


myButton.addEventListener('click', () => {
  var input = myTextInput.value,
      validator = /green|red/; /* you can refine this regex to better suit your needs. */
  
  if (validator.test(input)) {
      myHeading.style.color = input;
  }
} );

<button id="myButton">Color</button>
<h1 id="myHeading">Heading</h1>
<input id="myTextInput" type="text" name="myTextInput" value="">

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - How to set a color for a 'string' JavaScript - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)