为什么浮动不起作用？

时间：2018-01-17 21:41:43

标签： html css

所有浮点数都按预期工作，但divHeader中的浮点数没有。 我尝试了overflow：auto和float：在divVK中，但没有任何东西移动divEk旁边的divVk

＆＃13;
＆＃13; 
var bodyObj, className, index;

bodyObj = document.getElementById('preisicon');
index = 1;
className = [
  'dollar',
  'euro'
];

var euro2gbp;
var euro2usd;

function getXchange() {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "https://api.fixer.io/latest?symbols=USD,GBP", true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
      // JSON.parse does not evaluate the attacker's scripts.
      var resp = JSON.parse(xhr.responseText);
      euro2gbp = resp.rates.GBP;
      euro2usd = resp.rates.USD;
    }
  }
  xhr.send();
};

getXchange();

function calcLanded() {
  var preis = document.getElementById("preis").value
  if (index === 1) {
    var preis = preis * 1 / euro2usd;
    var preis2 = preis * euro2usd;
  } else {
    var preis2 = preis * 1 / euro2usd;
  }
  var versand = document.getElementById("versand").value;
  var landed = Number(preis) + Number(versand);
  document.getElementById("landed").value = landed.toFixed(0);
  //document.getElementById("brutto").value = (1.19 * landed).toFixed(0);
  //document.getElementById("preis2").value = preis2.toFixed(0);
  //document.getElementById("landed2").value = landed.toFixed(0);
  //document.getElementById("brutto2").value = (1.19 * landed).toFixed(0);
  document.getElementById("20proznetto").innerHTML = (1.20 * landed).toFixed(0);
  document.getElementById("20prozbrutto").innerHTML = (1.20 * 1.19 * landed).toFixed(0);
  document.getElementById("25proznetto").innerHTML = (1.25 * landed).toFixed(0);
  document.getElementById("25prozbrutto").innerHTML = (1.25 * 1.19 * landed).toFixed(0);
  document.getElementById("30proznetto").innerHTML = (1.30 * landed).toFixed(0);
  document.getElementById("30prozbrutto").innerHTML = (1.30 * 1.19 * landed).toFixed(0);
  document.getElementById("35proznetto").innerHTML = (1.35 * landed).toFixed(0);
  document.getElementById("35prozbrutto").innerHTML = (1.35 * 1.19 * landed).toFixed(0);
  document.getElementById("40proznetto").innerHTML = (1.40 * landed).toFixed(0);
  document.getElementById("40prozbrutto").innerHTML = (1.40 * 1.19 * landed).toFixed(0);
};

function calcBrutto() {
  var brutto = document.getElementById("brutto").value;
  document.getElementById("versand").value = '';
  document.getElementById("preis").value = '';
  document.getElementById("landed").value = (brutto / 1.19).toFixed(0);
  document.getElementById("20proznetto").innerHTML = (1.20 * landed).toFixed(0);
  document.getElementById("20prozbrutto").innerHTML = (1.20 * 1.19 * landed).toFixed(0);
  document.getElementById("25proznetto").innerHTML = (1.25 * landed).toFixed(0);
  document.getElementById("25prozbrutto").innerHTML = (1.25 * 1.19 * landed).toFixed(0);
  document.getElementById("30proznetto").innerHTML = (1.30 * landed).toFixed(0);
  document.getElementById("30prozbrutto").innerHTML = (1.30 * 1.19 * landed).toFixed(0);
  document.getElementById("35proznetto").innerHTML = (1.35 * landed).toFixed(0);
  document.getElementById("35prozbrutto").innerHTML = (1.35 * 1.19 * landed).toFixed(0);
  document.getElementById("40proznetto").innerHTML = (1.40 * landed).toFixed(0);
  document.getElementById("40prozbrutto").innerHTML = (1.40 * 1.19 * landed).toFixed(0);
};

function updateIndex() {
  console.log(index);
  if (index === 0) {
    index = 1;
    var preisicon2 = document.getElementById('preisicon2');
    preisicon2.className = className[1];
    console.log('hier');
    calcLanded();
  } else {
    index = 0;
    var preisicon2 = document.getElementById('preisicon2');
    preisicon2.className = className[0];
    console.log('da');
    calcLanded();
  }
}

bodyObj.onclick = function(e) {
  e.currentTarget.className = className[index];
  console.log(e.currentTarget.className);
  updateIndex();
}
＆＃13; 
#divBody {
  height: 100px;
  width: 180px;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}

#divHead {
  height: 100px;
  width: 500px;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}

#divEk {
  height: 100px;
  width: 180px;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  ,
  float: left;
}

#divVk {
  width: 120px;
  height: 100px;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  overflow: auto
}

#zeile:after {
  display: block;
  height: 00px;
  clear: both;
  float: none;
}

#zeile div {
  float: left;
}

#divHalter {
  width: 47px;
  height: 21px
}

#spalte1 {
  width: 50px;
  height: 21px;
  background-color: grey;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}

#spalte3 {
  width: 50px;
  height: 21px;
  background-color: grey;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}

#spalte4 {
  width: 20px;
  background-color: grey;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}

#spalte5 {
  width: 40px;
  background-color: grey;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}
＆＃13; 
<body body bgcolor="gray">
  <div id="divBody">
    <div id="divHead">
      <div id="divEk">
        <div id="zeile">
          <div id="spalte1">buy</div>
          <div id="spalte2">
            <div id='preisicon' class='dollar'></div>
          </div>
          <div id="spalte3">
            <input id='preis' type='text' size='2' tabindex="1" onchange="calcLanded()"></input>
          </div>
          <div id="spalte4"></div>
          <div id='preisicon2' class='euro'></div>
          <div id="spalte5">
            <input id='preis2' type='text' size='2' tabindex="-1" onchange="calcLanded()"></input>
          </div>
        </div>
        <div id="zeile">
          <div id="spalte1">ship</div>
          <div id="spalte2">
            <div id='preisicon' class='dollar'></div>
          </div>
          <div id="spalte3">
            <input id='versand' type='text' size='2' tabindex="2" onchange="calcLanded()"></input>
          </div>
          <div id="spalte4">
            <div id="divHalter"></div>
          </div>
          <div id="spalte5">
            <div id="divHalter"></div>
          </div>
        </div>
        <div id="zeile">
          <div id="spalte1">landed</div>
          <div id="spalte2">
            <div id='preisicon' class='euro'></div>
          </div>
          <div id="spalte3">
            <input id='landed' type='text' size='2' tabindex="-1" onchange="calcLanded()" disabled></input>
          </div>
          <div id="spalte4"></div>
          <div id="spalte5">
            <div id="divHalter"></div>
          </div>
        </div>
      </div>
      <div id="divVk">
        <div id="zeile">
          <div id="spalte1">Gewinn</div>
          <div id="spalte2">
            <div id='gewinnicon'></div>
          </div>
          <div id="spalte3">
            <input id='preis' type='text' size='2' tabindex="1" onchange="calcLanded()"></input>
          </div>
        </div>
        <div id="zeile">
          <div id="spalte1">Gewinn</div>
          <div id="spalte2">
            <div id='preisicon' class='euro'></div>
          </div>
          <div id="spalte3">
            <input id='gewinn' type='text' size='2' tabindex="2" onchange="calcLanded()"></input>
          </div>
        </div>
        <div id="zeile">
          <div id="spalte1">Netto</div>
          <div id="spalte2">
            <div id='preisicon' class='euro'></div>
          </div>
          <div id="spalte3">
            <input id='netto' type='text' size='2' tabindex="-1" onchange="calcLanded()" disabled></input>
          </div>
        </div>
        <div id="zeile">
          <div id="spalte1">Brutto</div>
          <div id="spalte2">
            <div id='preisicon' class='euro'></div>
          </div>
          <div id="spalte3">
            <input id='netto' type='text' size='2' tabindex="-1" onchange="calcLanded()" disabled></input>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
＆＃13;
＆＃13;
＆＃13; 

https://jsfiddle.net/01ufszxr/

2 个答案:

答案 0 :(得分：0)

你的代码错了。 在#divEk中你有：

height: 100px;
width: 180px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;,
float: left;

在填充左后，你有＆＃34;，＆＃34;。删除这个＆＃34;逗号＆＃34;它有效。

答案 1 :(得分：0)

您的代码有很多错误

＆＃13;
＆＃13; 
listview
＆＃13; 
var bodyObj, className, index;

bodyObj = document.getElementById('preisicon');
index = 1;
className = [
  'dollar',
  'euro'
];

var euro2gbp;
var euro2usd;

function getXchange() {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "https://api.fixer.io/latest?symbols=USD,GBP", true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
      // JSON.parse does not evaluate the attacker's scripts.
      var resp = JSON.parse(xhr.responseText);
      euro2gbp = resp.rates.GBP;
      euro2usd = resp.rates.USD;
    }
  }
  xhr.send();
};

getXchange();

function calcLanded() {
  var preis = document.getElementById("preis").value
  if (index === 1) {
    var preis = preis * 1 / euro2usd;
    var preis2 = preis * euro2usd;
  } else {
    var preis2 = preis * 1 / euro2usd;
  }
  var versand = document.getElementById("versand").value;
  var landed = Number(preis) + Number(versand);
  document.getElementById("landed").value = landed.toFixed(0);
  //document.getElementById("brutto").value = (1.19 * landed).toFixed(0);
  //document.getElementById("preis2").value = preis2.toFixed(0);
  //document.getElementById("landed2").value = landed.toFixed(0);
  //document.getElementById("brutto2").value = (1.19 * landed).toFixed(0);
  document.getElementById("20proznetto").innerHTML = (1.20 * landed).toFixed(0);
  document.getElementById("20prozbrutto").innerHTML = (1.20 * 1.19 * landed).toFixed(0);
  document.getElementById("25proznetto").innerHTML = (1.25 * landed).toFixed(0);
  document.getElementById("25prozbrutto").innerHTML = (1.25 * 1.19 * landed).toFixed(0);
  document.getElementById("30proznetto").innerHTML = (1.30 * landed).toFixed(0);
  document.getElementById("30prozbrutto").innerHTML = (1.30 * 1.19 * landed).toFixed(0);
  document.getElementById("35proznetto").innerHTML = (1.35 * landed).toFixed(0);
  document.getElementById("35prozbrutto").innerHTML = (1.35 * 1.19 * landed).toFixed(0);
  document.getElementById("40proznetto").innerHTML = (1.40 * landed).toFixed(0);
  document.getElementById("40prozbrutto").innerHTML = (1.40 * 1.19 * landed).toFixed(0);
};

function calcBrutto() {
  var brutto = document.getElementById("brutto").value;
  document.getElementById("versand").value = '';
  document.getElementById("preis").value = '';
  document.getElementById("landed").value = (brutto / 1.19).toFixed(0);
  document.getElementById("20proznetto").innerHTML = (1.20 * landed).toFixed(0);
  document.getElementById("20prozbrutto").innerHTML = (1.20 * 1.19 * landed).toFixed(0);
  document.getElementById("25proznetto").innerHTML = (1.25 * landed).toFixed(0);
  document.getElementById("25prozbrutto").innerHTML = (1.25 * 1.19 * landed).toFixed(0);
  document.getElementById("30proznetto").innerHTML = (1.30 * landed).toFixed(0);
  document.getElementById("30prozbrutto").innerHTML = (1.30 * 1.19 * landed).toFixed(0);
  document.getElementById("35proznetto").innerHTML = (1.35 * landed).toFixed(0);
  document.getElementById("35prozbrutto").innerHTML = (1.35 * 1.19 * landed).toFixed(0);
  document.getElementById("40proznetto").innerHTML = (1.40 * landed).toFixed(0);
  document.getElementById("40prozbrutto").innerHTML = (1.40 * 1.19 * landed).toFixed(0);
};

function updateIndex() {
  console.log(index);
  if (index === 0) {
    index = 1;
    var preisicon2 = document.getElementById('preisicon2');
    preisicon2.className = className[1];
    console.log('hier');
    calcLanded();
  } else {
    index = 0;
    var preisicon2 = document.getElementById('preisicon2');
    preisicon2.className = className[0];
    console.log('da');
    calcLanded();
  }
}

bodyObj.onclick = function(e) {
  e.currentTarget.className = className[index];
  console.log(e.currentTarget.className);
  updateIndex();
}
＆＃13; 
#divBody {
  height: 100px;
  width: 180px;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}

#divHead {
  height: 100px;
  width: 500px;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}

#divEk {
  height: 100px;
  width: 180px;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  float: left;
}

#divVk {
  width: 120px;
  height: 100px;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  overflow: auto;
}

#zeile:after {
  display: block;
  height: 00px;
  clear: both;
  float: none;
}

#zeile div {
  float: left;
}

#divHalter {
  width: 47px;
  height: 21px
}

#spalte1 {
  width: 50px;
  height: 21px;
  background-color: grey;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}

#spalte3 {
  width: 50px;
  height: 21px;
  background-color: grey;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}

#spalte4 {
  width: 20px;
  background-color: grey;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}

#spalte5 {
  width: 40px;
  background-color: grey;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题