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

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - If .length is > for a select option - Stack Overflow

    javascript - If .length is > for a select option - Stack Overflow

    programmeradmin3浏览0评论

    function Player(username, lvl, exp, expNeeded, nextLevel, gold, hp, atk, def, spd) {
    var self = this;
    this.username = username;
    this.lvl = lvl;
    this.exp = exp;
    this.nextLevel = nextLevel;
    this.expNeeded = expNeeded;
    this.gold = gold;
    this.fullLife = hp;
    this.hp = hp;
    this.atk = atk;
    this.def = def;
    this.spd = spd;
    this.implement = function() {
        $('#user').text(this.username).addClass('playerName').data('player', self)
        $('#username').text("Username: " + this.username);
        $('#lvl').text("Level: " + this.lvl);
        $('#exp').text("Experience: " + this.exp);
        $('#expNeeded').text("Experience Needed: " + this.expNeeded);
        $('#gold').text("Gold: " + this.gold);
        $('#hp').text("HP: " + this.fullLife);
        $('#attack').text("Attack: " + this.atk);
        $('#defense').text("Defense: " + this.def);
        $('#speed').text("Speed: " + this.spd);
        $('#nextLevel').text("Next Level: " + this.nextLevel);
    }
    this.implement();
}
var newPlayer = new Player(prompt("What is your username?"), 1, 0, 10, 10, 0, 10, 2, 1, 1);
playerEl = $('.playerName');
player = playerEl.data('player');

function Monster(name, exp, gold, hp, atk, def, spd) {

  var self = this;
	this.name = name;
	this.exp = exp;
  this.gold = gold;
  this.fullLife = hp;
  this.hp = hp;
  this.atk = atk;
  this.def = def;
  this.spd = spd;
  // Method definition
  this.implement = function() {
  	var monsterList = document.getElementById('monsterList');
    var opt = document.createElement('OPTION'); // Creating option
    opt.innerText = this.name; // Setting innertText attribute
    $(opt).data('monster', self)
    monsterList.appendChild(opt); // appending option to select element
  }
  this.len = this.name.length;
  this.playerDamage = 0;
  this.playerDam = function () {
  	if(player.atk <= this.def) {
    	self.playerDamage = player.atk - 1;
      return self.playerDamage;
    }
    else {
  	self.playerDamage = Math.round((player.atk - self.def) * (2 - Math.random()));
    return self.playerDamage;
    }
  }
  this.monsterDamage = 0;
  this.monsterDam = function() {
      if(this.atk <= player.def) {
          self.monsterDamage = monster.atk - 1;
          return self.monsterDamage;
      }
    else {
        self.monsterDamage = Math.round((self.atk - player.def) * (2 - Math.random()));
        return self.monsterDamage;
    }
  }
  // Method execution
  this.implement();
}

var fly = new Monster("fly", 1, 1, 5, 2, 1, 1);
var mouse = new Monster("mouse", 2, 3, 10, 2, 1, 2);
var rat = new Monster("rat", 4, 5, 20, 4, 2, 2);
var rabidChihuahua = new Monster("chihuahua", 6, 8, 35, 6, 1, 4);
var bulldog = new Monster("bulldog", 10, 14, 60, 10, 4, 1);
var wolf = new Monster("Wolf", 15, 18, 65, 12, 3, 6);
var vampie = new Monster("Vampire", 20, 23, 100, 12, 5, 4);
var werewolf = new Monster("Werewolf", 25, 29, 100, 14, 3, 9);
var giantSlime = new Monster("Giant Slime", 31, 38, 200, 7, 15, 1);
var babyDragon = new Monster("Baby Dragon", 39, 50, 150, 16, 9, 5);
var orc = new Monster("Orc", 50, 64, 220, 10, 12, 4);
var succubi = new Monster("Succubi", 61, 80, 190, 21, 8, 12);
var elderDragon = new Monster("Elder Dragon", 75, 100, 300, 21, 15, 8);
var sanaan = new Monster("Sanaan", 150, 500, 500, 55, 45, 30);


monsterEl = $('#monsterList option:selected');
monster = monsterEl.data('monster');
$('#battleButton').click(function() {
	//playerDam();
    var round = 0;

  $('#dam').empty();
  $('#monsterdam').empty();
  while(monster.hp > 0 && player.hp > 0 && round < 20) {
      $('#monsterdam').append("</p>The " + $('#monsterList').val() + " has hit you for " + monster.monsterDam() + " damage</p>");
      player.hp -= monster.monsterDam();
  	$('#dam').append("</p>You have hit the " + $('#monsterList').val() + " for " + monster.playerDam() + " damage</p>");
    monster.hp -= monster.playerDam();
    round +=1;
        if(round >=20) {
            $('#monsterdam').append("</p>The battle has timed out</p>");
            $('#dam').append("</p>The battle has timed out</p>");
        }
  }
  if(monster.hp <= 0){
  $('#dam').append("<p>You have defeated the " + $('#monsterList').val() + ", you have received " + monster.exp + " experience and " + monster.gold + " gold!</p>");
    monster.hp = monster.fullLife;
    player.hp = player.fullLife;
    player.exp += monster.exp;
    player.gold += monster.gold;
    player.nextLevel -= monster.exp;
    player.implement();
    if(player.exp >= player.expNeeded) {
        lvlUp();
    }
}
if(player.hp <= 0){
$('#monsterdam').append("<p>The " + $('#monsterList').val() + " has defeated you!</p>");
  monster.hp = monster.fullLife;
  player.hp = player.fullLife;
}
});

var lvlUp = function() {
    player.expNeeded += player.expNeeded + player.lvl * player.lvl;
    player.nextLevel = player.expNeeded - player.exp;
    player.fullLife += player.lvl * 5 + (2 * player.lvl);
    player.lvl += 1;
    player.atk += 1;
    player.def += 1;
    player.spd += 1;
}

if(monster.len > 8) {
    $('select').css({
        "font-size": "12px"
    });
}
else {
    $('select').css({
        "font-size": "18px"
    });
}
    body {
  background-color: #000;
}

#stats {
    width: 1200px;
    height: 75px;
    margin: auto;
    border-radius: 10px;
    text-align: center;
    margin-top: 5px;
    border: 2px solid rgba(98, 39, 39, 0.6);
    background: rgba(255,255,255,0);
background: -moz-linear-gradient(-45deg, rgba(255,255,255,0) 24%, rgba(143,57,57,0.5) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(24%, rgba(255,255,255,0)), color-stop(100%, rgba(143,57,57,0.5)));
background: -webkit-linear-gradient(-45deg, rgba(255,255,255,0) 24%, rgba(143,57,57,0.5) 100%);
background: -o-linear-gradient(-45deg, rgba(255,255,255,0) 24%, rgba(143,57,57,0.5) 100%);
background: -ms-linear-gradient(-45deg, rgba(255,255,255,0) 24%, rgba(143,57,57,0.5) 100%);
background: linear-gradient(135deg, rgba(255,255,255,0) 24%, rgba(143,57,57,0.5) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#8f3939', GradientType=1 );
}

#stats li {
    display: list-item;
    list-style-type: none;
    color: #fff;
    font-size: 12px;
}

#stats ul {
    display: inline-block;
    float: left;
    text-align: left;
    margin-top: 10px;
}

#intro {
    max-width: 700px;
    margin: auto;
    text-align: center;
    margin-top: 30px;
    line-height: 1.25;
    font-family: "Cabin", sans-serif;
    font-weight: 500;
    padding-bottom: 30px;
}

#stats ul:not(.firstul) {
    margin-left: 100px;
}

#nav {
    width: 1200px;
    height: 75px;
    margin: auto;
    border-radius: 10px;
    text-align: center;
    margin-top: 5px;
    border: 2px solid rgba(98, 39, 39, 0.6);
    background: rgba(255,255,255,0);
background: -moz-linear-gradient(-45deg, rgba(255,255,255,0) 24%, rgba(143,57,57,0.5) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(24%, rgba(255,255,255,0)), color-stop(100%, rgba(143,57,57,0.5)));
background: -webkit-linear-gradient(-45deg, rgba(255,255,255,0) 24%, rgba(143,57,57,0.5) 100%);
background: -o-linear-gradient(-45deg, rgba(255,255,255,0) 24%, rgba(143,57,57,0.5) 100%);
background: -ms-linear-gradient(-45deg, rgba(255,255,255,0) 24%, rgba(143,57,57,0.5) 100%);
background: linear-gradient(135deg, rgba(255,255,255,0) 24%, rgba(143,57,57,0.5) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#8f3939', GradientType=1 );
}

#user {
    font-size: 32px;
    margin-top: 0px;
    color: rgba(156, 48, 48, 1);
    -webkit-text-stroke: 1.5px black;
    text-shadow: 2px 2px 2px darkred,
                       1px 1px 0px #000,
                       3px 3px 0px #000,
                       4px 4px 2px #000;
}

#nav li {
    display: inline;
    font-size: 21px;
    text-align: center;
    line-height: .8;
    color: #a3a3a3;
    text-shadow: 1px 1px 1px #111,
                       2px 2px 4px #000;
}

#nav li:hover {
    color: #e0e0e0;
    text-shadow: 2px 2px 2px #222,
                       2px 2px 3px #333,
                       3px 3px 0px #000;
}

#nav li:not(.first) {
    margin-left: 40px;
}

a {
    text-decoration: none;
    outline: 0;
}

select:focus {
    outline: 0;
}

*:focus {
    outline: 0;
}
ul a:hover {
    text-decoration: none;
}

select {
  background-color: rgba(0, 0, 0, 0);
  border-color: #941919;
  color: #941919;
  margin: auto;
  margin-left:450px;
  margin-top: 15px;
  float: none;
  width: 150px;
  height: 50px;
  border-radius: 10px;
  text-transform: uppercase;
  font-size: 18px;
}


option {
    text-transform: lowercase;
    background-color: #000;
}

main {
    width: 1200px;
    height: 500px;
    margin: auto;
    border: 2px solid rgba(98, 39, 39, .6);
    border-radius: 10px;
    margin-top: 5px;
    background: rgba(255,255,255,0);
background: -moz-linear-gradient(-45deg, rgba(255,255,255,0) 24%, rgba(143,57,57,0.5) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(24%, rgba(255,255,255,0)), color-stop(100%, rgba(143,57,57,0.5)));
background: -webkit-linear-gradient(-45deg, rgba(255,255,255,0) 24%, rgba(143,57,57,0.5) 100%);
background: -o-linear-gradient(-45deg, rgba(255,255,255,0) 24%, rgba(143,57,57,0.5) 100%);
background: -ms-linear-gradient(-45deg, rgba(255,255,255,0) 24%, rgba(143,57,57,0.5) 100%);
background: linear-gradient(135deg, rgba(255,255,255,0) 24%, rgba(143,57,57,0.5) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#8f3939', GradientType=1);
}

#battleButton {
  background-color: rgba(0, 0, 0, 0);
  border-color: #941919;
  color: #941919;
  border-radius: 10px;
  margin: auto;
  margin-left: 50px;
  margin-top: 15px;
  height: 50px;
  width: 100px;
  font-size: 18px;
  text-transform: uppercase;
}

#help, #noHelp {
  background-color: rgba(0, 0, 0, 0);
  border-color: #941919;
  color: #941919;
  border-radius: 10px;
  margin: auto;
  float: none;
  height: 50px;
  width: 100px;
  display: inline-block;
  font-size: 18px;
  text-transform: uppercase;
  margin-top: 100px;
}

#help {
    margin: auto;
    margin-left: 495px;
}

#noHelp {
    margin: auto;
}

#dam {
  color: #941919;
  font-family: sans-serif;
  font-size: 18px;
  max-width: 40%;
  min-width: 40%;
  text-align: center;
  float: left;
  margin: 40px;
  margin-left: 100px;
  max-height: 350px;
  overflow-y: auto;
}

#monsterdam {
  color: #941919;
  font-family: sans-serif;
  font-size: 18px;
  max-width: 40%;
  min-width: 40%;
  text-align: center;
  margin-right: 100px;
  float: right;
  margin: 40px;
  max-height: 350px;
  overflow-y: auto;
}

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
      <body>
<header id="stats">
    <ul class="firstul">
        <li id="username"></li>
        <li id="lvl"></li>
        <li id="exp"></li>
    </ul>
    <ul>
        <li id="expNeeded"></li>
        <li id="nextLevel"></li>
        <li id="hp"></li>
    </ul>
    <ul>
        <li id="attack"></li>
        <li id="defense"></li>
        <li id="speed"></li>
    </ul>
    <ul>
        <li id="gold"></li>
        <li id="items">Items: </li>
    </ul>
</header>
<header id="nav">
    <h1 id="user"></h1>
    <ul>
        <a href="#"><li class="first">Home</li></a>
        <a href="#"><li>Battle</li></a>
        <a href="#"><li>Profile</li></a>
        <a href="#"><li>Inventory</li></a>
        <a href="#"><li>Help</li></a>
    </ul>
</header>
<main>
    <div>
    <select id="monsterList"></select>

    <button id="battleButton">Battle</button>
    </div>
    <div id="dam"></div>
    <div id="monsterdam"></div>
</main>

    <script src="game.js"></script>
  </body>

    function Player(username, lvl, exp, expNeeded, nextLevel, gold, hp, atk, def, spd) {
    var self = this;
    this.username = username;
    this.lvl = lvl;
    this.exp = exp;
    this.nextLevel = nextLevel;
    this.expNeeded = expNeeded;
    this.gold = gold;
    this.fullLife = hp;
    this.hp = hp;
    this.atk = atk;
    this.def = def;
    this.spd = spd;
    this.implement = function() {
        $('#user').text(this.username).addClass('playerName').data('player', self)
        $('#username').text("Username: " + this.username);
        $('#lvl').text("Level: " + this.lvl);
        $('#exp').text("Experience: " + this.exp);
        $('#expNeeded').text("Experience Needed: " + this.expNeeded);
        $('#gold').text("Gold: " + this.gold);
        $('#hp').text("HP: " + this.fullLife);
        $('#attack').text("Attack: " + this.atk);
        $('#defense').text("Defense: " + this.def);
        $('#speed').text("Speed: " + this.spd);
        $('#nextLevel').text("Next Level: " + this.nextLevel);
    }
    this.implement();
}
var newPlayer = new Player(prompt("What is your username?"), 1, 0, 10, 10, 0, 10, 2, 1, 1);
playerEl = $('.playerName');
player = playerEl.data('player');

function Monster(name, exp, gold, hp, atk, def, spd) {

  var self = this;
	this.name = name;
	this.exp = exp;
  this.gold = gold;
  this.fullLife = hp;
  this.hp = hp;
  this.atk = atk;
  this.def = def;
  this.spd = spd;
  // Method definition
  this.implement = function() {
  	var monsterList = document.getElementById('monsterList');
    var opt = document.createElement('OPTION'); // Creating option
    opt.innerText = this.name; // Setting innertText attribute
    $(opt).data('monster', self)
    monsterList.appendChild(opt); // appending option to select element
  }
  this.len = this.name.length;
  this.playerDamage = 0;
  this.playerDam = function () {
  	if(player.atk <= this.def) {
    	self.playerDamage = player.atk - 1;
      return self.playerDamage;
    }
    else {
  	self.playerDamage = Math.round((player.atk - self.def) * (2 - Math.random()));
    return self.playerDamage;
    }
  }
  this.monsterDamage = 0;
  this.monsterDam = function() {
      if(this.atk <= player.def) {
          self.monsterDamage = monster.atk - 1;
          return self.monsterDamage;
      }
    else {
        self.monsterDamage = Math.round((self.atk - player.def) * (2 - Math.random()));
        return self.monsterDamage;
    }
  }
  // Method execution
  this.implement();
}

var fly = new Monster("fly", 1, 1, 5, 2, 1, 1);
var mouse = new Monster("mouse", 2, 3, 10, 2, 1, 2);
var rat = new Monster("rat", 4, 5, 20, 4, 2, 2);
var rabidChihuahua = new Monster("chihuahua", 6, 8, 35, 6, 1, 4);
var bulldog = new Monster("bulldog", 10, 14, 60, 10, 4, 1);
var wolf = new Monster("Wolf", 15, 18, 65, 12, 3, 6);
var vampie = new Monster("Vampire", 20, 23, 100, 12, 5, 4);
var werewolf = new Monster("Werewolf", 25, 29, 100, 14, 3, 9);
var giantSlime = new Monster("Giant Slime", 31, 38, 200, 7, 15, 1);
var babyDragon = new Monster("Baby Dragon", 39, 50, 150, 16, 9, 5);
var orc = new Monster("Orc", 50, 64, 220, 10, 12, 4);
var succubi = new Monster("Succubi", 61, 80, 190, 21, 8, 12);
var elderDragon = new Monster("Elder Dragon", 75, 100, 300, 21, 15, 8);
var sanaan = new Monster("Sanaan", 150, 500, 500, 55, 45, 30);


monsterEl = $('#monsterList option:selected');
monster = monsterEl.data('monster');
$('#battleButton').click(function() {
	//playerDam();
    var round = 0;

  $('#dam').empty();
  $('#monsterdam').empty();
  while(monster.hp > 0 && player.hp > 0 && round < 20) {
      $('#monsterdam').append("</p>The " + $('#monsterList').val() + " has hit you for " + monster.monsterDam() + " damage</p>");
      player.hp -= monster.monsterDam();
  	$('#dam').append("</p>You have hit the " + $('#monsterList').val() + " for " + monster.playerDam() + " damage</p>");
    monster.hp -= monster.playerDam();
    round +=1;
        if(round >=20) {
            $('#monsterdam').append("</p>The battle has timed out</p>");
            $('#dam').append("</p>The battle has timed out</p>");
        }
  }
  if(monster.hp <= 0){
  $('#dam').append("<p>You have defeated the " + $('#monsterList').val() + ", you have received " + monster.exp + " experience and " + monster.gold + " gold!</p>");
    monster.hp = monster.fullLife;
    player.hp = player.fullLife;
    player.exp += monster.exp;
    player.gold += monster.gold;
    player.nextLevel -= monster.exp;
    player.implement();
    if(player.exp >= player.expNeeded) {
        lvlUp();
    }
}
if(player.hp <= 0){
$('#monsterdam').append("<p>The " + $('#monsterList').val() + " has defeated you!</p>");
  monster.hp = monster.fullLife;
  player.hp = player.fullLife;
}
});

var lvlUp = function() {
    player.expNeeded += player.expNeeded + player.lvl * player.lvl;
    player.nextLevel = player.expNeeded - player.exp;
    player.fullLife += player.lvl * 5 + (2 * player.lvl);
    player.lvl += 1;
    player.atk += 1;
    player.def += 1;
    player.spd += 1;
}

if(monster.len > 8) {
    $('select').css({
        "font-size": "12px"
    });
}
else {
    $('select').css({
        "font-size": "18px"
    });
}
    body {
  background-color: #000;
}

#stats {
    width: 1200px;
    height: 75px;
    margin: auto;
    border-radius: 10px;
    text-align: center;
    margin-top: 5px;
    border: 2px solid rgba(98, 39, 39, 0.6);
    background: rgba(255,255,255,0);
background: -moz-linear-gradient(-45deg, rgba(255,255,255,0) 24%, rgba(143,57,57,0.5) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(24%, rgba(255,255,255,0)), color-stop(100%, rgba(143,57,57,0.5)));
background: -webkit-linear-gradient(-45deg, rgba(255,255,255,0) 24%, rgba(143,57,57,0.5) 100%);
background: -o-linear-gradient(-45deg, rgba(255,255,255,0) 24%, rgba(143,57,57,0.5) 100%);
background: -ms-linear-gradient(-45deg, rgba(255,255,255,0) 24%, rgba(143,57,57,0.5) 100%);
background: linear-gradient(135deg, rgba(255,255,255,0) 24%, rgba(143,57,57,0.5) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#8f3939', GradientType=1 );
}

#stats li {
    display: list-item;
    list-style-type: none;
    color: #fff;
    font-size: 12px;
}

#stats ul {
    display: inline-block;
    float: left;
    text-align: left;
    margin-top: 10px;
}

#intro {
    max-width: 700px;
    margin: auto;
    text-align: center;
    margin-top: 30px;
    line-height: 1.25;
    font-family: "Cabin", sans-serif;
    font-weight: 500;
    padding-bottom: 30px;
}

#stats ul:not(.firstul) {
    margin-left: 100px;
}

#nav {
    width: 1200px;
    height: 75px;
    margin: auto;
    border-radius: 10px;
    text-align: center;
    margin-top: 5px;
    border: 2px solid rgba(98, 39, 39, 0.6);
    background: rgba(255,255,255,0);
background: -moz-linear-gradient(-45deg, rgba(255,255,255,0) 24%, rgba(143,57,57,0.5) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(24%, rgba(255,255,255,0)), color-stop(100%, rgba(143,57,57,0.5)));
background: -webkit-linear-gradient(-45deg, rgba(255,255,255,0) 24%, rgba(143,57,57,0.5) 100%);
background: -o-linear-gradient(-45deg, rgba(255,255,255,0) 24%, rgba(143,57,57,0.5) 100%);
background: -ms-linear-gradient(-45deg, rgba(255,255,255,0) 24%, rgba(143,57,57,0.5) 100%);
background: linear-gradient(135deg, rgba(255,255,255,0) 24%, rgba(143,57,57,0.5) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#8f3939', GradientType=1 );
}

#user {
    font-size: 32px;
    margin-top: 0px;
    color: rgba(156, 48, 48, 1);
    -webkit-text-stroke: 1.5px black;
    text-shadow: 2px 2px 2px darkred,
                       1px 1px 0px #000,
                       3px 3px 0px #000,
                       4px 4px 2px #000;
}

#nav li {
    display: inline;
    font-size: 21px;
    text-align: center;
    line-height: .8;
    color: #a3a3a3;
    text-shadow: 1px 1px 1px #111,
                       2px 2px 4px #000;
}

#nav li:hover {
    color: #e0e0e0;
    text-shadow: 2px 2px 2px #222,
                       2px 2px 3px #333,
                       3px 3px 0px #000;
}

#nav li:not(.first) {
    margin-left: 40px;
}

a {
    text-decoration: none;
    outline: 0;
}

select:focus {
    outline: 0;
}

*:focus {
    outline: 0;
}
ul a:hover {
    text-decoration: none;
}

select {
  background-color: rgba(0, 0, 0, 0);
  border-color: #941919;
  color: #941919;
  margin: auto;
  margin-left:450px;
  margin-top: 15px;
  float: none;
  width: 150px;
  height: 50px;
  border-radius: 10px;
  text-transform: uppercase;
  font-size: 18px;
}


option {
    text-transform: lowercase;
    background-color: #000;
}

main {
    width: 1200px;
    height: 500px;
    margin: auto;
    border: 2px solid rgba(98, 39, 39, .6);
    border-radius: 10px;
    margin-top: 5px;
    background: rgba(255,255,255,0);
background: -moz-linear-gradient(-45deg, rgba(255,255,255,0) 24%, rgba(143,57,57,0.5) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(24%, rgba(255,255,255,0)), color-stop(100%, rgba(143,57,57,0.5)));
background: -webkit-linear-gradient(-45deg, rgba(255,255,255,0) 24%, rgba(143,57,57,0.5) 100%);
background: -o-linear-gradient(-45deg, rgba(255,255,255,0) 24%, rgba(143,57,57,0.5) 100%);
background: -ms-linear-gradient(-45deg, rgba(255,255,255,0) 24%, rgba(143,57,57,0.5) 100%);
background: linear-gradient(135deg, rgba(255,255,255,0) 24%, rgba(143,57,57,0.5) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#8f3939', GradientType=1);
}

#battleButton {
  background-color: rgba(0, 0, 0, 0);
  border-color: #941919;
  color: #941919;
  border-radius: 10px;
  margin: auto;
  margin-left: 50px;
  margin-top: 15px;
  height: 50px;
  width: 100px;
  font-size: 18px;
  text-transform: uppercase;
}

#help, #noHelp {
  background-color: rgba(0, 0, 0, 0);
  border-color: #941919;
  color: #941919;
  border-radius: 10px;
  margin: auto;
  float: none;
  height: 50px;
  width: 100px;
  display: inline-block;
  font-size: 18px;
  text-transform: uppercase;
  margin-top: 100px;
}

#help {
    margin: auto;
    margin-left: 495px;
}

#noHelp {
    margin: auto;
}

#dam {
  color: #941919;
  font-family: sans-serif;
  font-size: 18px;
  max-width: 40%;
  min-width: 40%;
  text-align: center;
  float: left;
  margin: 40px;
  margin-left: 100px;
  max-height: 350px;
  overflow-y: auto;
}

#monsterdam {
  color: #941919;
  font-family: sans-serif;
  font-size: 18px;
  max-width: 40%;
  min-width: 40%;
  text-align: center;
  margin-right: 100px;
  float: right;
  margin: 40px;
  max-height: 350px;
  overflow-y: auto;
}

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
      <body>
<header id="stats">
    <ul class="firstul">
        <li id="username"></li>
        <li id="lvl"></li>
        <li id="exp"></li>
    </ul>
    <ul>
        <li id="expNeeded"></li>
        <li id="nextLevel"></li>
        <li id="hp"></li>
    </ul>
    <ul>
        <li id="attack"></li>
        <li id="defense"></li>
        <li id="speed"></li>
    </ul>
    <ul>
        <li id="gold"></li>
        <li id="items">Items: </li>
    </ul>
</header>
<header id="nav">
    <h1 id="user"></h1>
    <ul>
        <a href="#"><li class="first">Home</li></a>
        <a href="#"><li>Battle</li></a>
        <a href="#"><li>Profile</li></a>
        <a href="#"><li>Inventory</li></a>
        <a href="#"><li>Help</li></a>
    </ul>
</header>
<main>
    <div>
    <select id="monsterList"></select>

    <button id="battleButton">Battle</button>
    </div>
    <div id="dam"></div>
    <div id="monsterdam"></div>
</main>

    <script src="game.js"></script>
  </body>

    I have a select menu and I want to change the font-size to be smaller if the word for the option selected is longer than a certain amount of characters. I've tried multiple ways of doing this and nothing works. Here is my most recent attempt.

    JSFiddle

    if(monster.len > 8) {
    $('select').css({
        "font-size": "12px"
    });
}
else {
    $('select').css({
        "font-size": "18px"
    });
}
    • javascript
    • jquery
    • css
    Share Improve this question edited Mar 17, 2016 at 15:47 itzmukeshy7 2,6781 gold badge23 silver badges30 bronze badges asked Mar 17, 2016 at 15:30 ShniperShniper 8541 gold badge10 silver badges34 bronze badges 7
    • This code is working, but monster.len == 3, so always set 18px. At least in your fiddle. Will be better if you explain what you need. If you want to avoid overflowing in the name, maybe you need something like text-overflow: ellipsis. Explain better or this question should be closed as offtopic (questions seeking "why isn't this code working?" are offtopic in stackoverflow if you don't provide a working example) – Marcos Pérez Gude Commented Mar 17, 2016 at 15:37
    • @MarcosPérezGude is correct, it is changing on page load to 18px, which you can see inline on the select tag, but you don't have this logic inside a jquery change event for the select tag. – Ben Sewards Commented Mar 17, 2016 at 15:39
    • When you click on the select menu and select one of the other options (Elder Dragon is the longest) then monster.len is no longer = to 3. – Shniper Commented Mar 17, 2016 at 15:39
    • right, but you're not listening to what my ment is suggesting. – Ben Sewards Commented Mar 17, 2016 at 15:41
    • @Shniper True, but the snippet you posted in the question is only executed on page load, not after changing the selected value. – Jason P Commented Mar 17, 2016 at 15:42
     |  Show 2 more ments

    5 Answers 5

    Reset to default 3

    Just glancing through your code, it looks like you are not binding to any change event on your select. The if statement runs just the one time on page load, checking the length, which is probably not what you want. You need to bind to change, check the length of the selected monster, then act on it.

    Your check only runs on what is the default selected option when the page loads. The code will not run when you change the value in the select. You would need to trigger that chunk of code when the select element is changed.

    So wrap the 

    $("select").on("change", function () {
    /* your code */
}).trigger("change");  //so it runs when initialized

    You can do it like this:

    $('#monsterList').on('change', function() {

  if ($('option:selected', this).text().length > 8) {
    $('select').css({
      "font-size": "12px"
    });
    $('select option').css({
      "font-size": "12px"
    });
  } else {

    $('select').css({
      "font-size": "18px"
    });
    $('select option').css({
      "font-size": "12px"
    });

  }

}).trigger('change');
    <script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="monsterList">
  <option>fly</option>
  <option>wolf</option>
  <option>chihuahua</option>
  <option>fladaday</option>
  <option>Vampire</option>
  <option>Giant Slime</option>
  <option>Orc</option>
  <option>Sanaan</option>
</select>

    Am i correct if you want the <option> tag's to have different styles depending on your monsters name length?

    $('#monsterList option').each(function(){
        if($(this).html().length > 8){
        $(this).css('font-size', '12px');
      }
    })

    This code will change the font if the name is longer then 8 characters in the select field. Your code is kinda wrecked, so i didnt try to use your own variables because of all the spagetthi, but this does the job.

    working script: https://jsfiddle/sbxu0p2d/4/

    If you move this line:

    var elderDragon = new Monster("Elder Dragon", 75, 100, 300, 21, 15, 8);

    before this line:

    var fly = new Monster("fly", 1, 1, 5, 2, 1, 1);

    Then you'll notice that your font does get loaded in the way you want it, so the .len functionality you implemented works. As stated above all you need now is to bind a event listener to the dropdownbox and then check the selected value in the same way as you were already doing.

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论