科尔多瓦android应用无法使用某些JavaScript函数

时间:2019-05-14 04:04:18

标签: javascript android cordova

我是Cordova的新手,我正在尝试构建一个android应用 我将文件复制到www文件中,并将其替换为我的文件 并生成apk,但是在手机上运行时,前两个按钮仅起作用(等重/不等重),而(添加更多/重置/结果按钮)不起作用,但是当我尝试将代码检查为网页,效果很好,如您在代码段中所见

我还尝试将cordova.js文件和index.js保留在我的app.js中,但没有用

我试图添加cordova.js和index.js(使用Cordova创建项目时自动创建的文件),但是没有用

//declare the main buttons and divs
const btn1 = document.querySelector('.eqbtn'),
  btn2 = document.querySelector('.uneqbtn'),
  div1 = document.querySelector('.eqdiv'),
  div2 = document.querySelector('.wrap-sub')
div_2 = document.querySelector('.uneqdiv');

//add event listeners to the main buttons
btn1.addEventListener('click', equalFunc);
btn2.addEventListener('click', unequalFunc);

//switch between two keys
function equalFunc() {
  togFunc(div1, div_2, btn1, btn2);
  resetFunc('.eqdiv', div1);
}

function unequalFunc() {
  togFunc(div_2, div1, btn2, btn1);
  resetFunc('.wrap-sub', div2);
}

function togFunc(one, two, a, b) {
  a.classList.add('active');
  b.classList.remove('active');
  one.style.display = 'block';
  two.style.display = 'none';
}

//declare the equal addmore button
const btnplus = document.querySelector('.eqmore');
const unbtnplus = document.querySelector('.un-eqmore');

//fire when addmore button get fired
btnplus.addEventListener('click', () => {
  if (checkIn('.eqdiv') === false) {
    errIn();
  } else {
    creatIn(div1);
  }
});

//fire when uneqaddmore get clicked
unbtnplus.addEventListener('click', () => {
  if (checkIn('.wrap-sub') === false) {
    errIn();
  } else {
    creatIn(div2);
  }
})
//check the value of the inputs
function checkIn(nav) {
  let bool;
  document.querySelectorAll(`${nav} input`).forEach((elem) => {
    if (elem.value === '' || elem.value < 0) {
      elem.style.borderColor = '#f86868';
      bool = false;
    } else {
      elem.style.borderColor = '#D1D1D1';
    }
  });
  return bool;
}


//create the input and assign it's value
function creatIn(dnav) {
  if (dnav === div1) {
    const dive = document.createElement('div');
    dive.innerHTML = `<input type ='number'/>`;
    dnav.insertBefore(dive, btnplus);
  } else {
    const sp1 = document.createElement('div'),
      sp2 = document.createElement('div');
    sp1.innerHTML = `<input type ='number'>`;
    sp2.innerHTML = `<input type ='number'>`;
    document.querySelector('.div2-1').appendChild(sp2);
    document.querySelector('.div2-2').appendChild(sp1);
  }

}

//fire an error if the user insert wrong value
function errIn() {
  const errdiv = document.createElement('div');
  errdiv.innerHTML = `Please fill inputs with positive values`;
  errdiv.classList.add('errdiv');
  document.querySelector('.wrap').insertAdjacentElement('beforeend', errdiv);
  setTimeout(() => errdiv.remove(), 1800);
}

//fire when the reset button get clicked
function resetFunc(x, y) {
  document.querySelectorAll(`${x} input`).forEach(reset => {
    reset.remove();
  });
  document.querySelector('#output').innerHTML = '';
  creatIn(y);
}

//reset all the inputs
document.querySelector('.reset').addEventListener('click', () => resetFunc('.eqdiv', div1));
document.querySelector('.un-reset').addEventListener('click', () => resetFunc('.wrap-sub', div2));

//fire when result button get fired
document.querySelector('.result').addEventListener('click', resFunc);
document.querySelector('.un-result').addEventListener('click', unresFunc);

//declare result function when result button get clicked
function resFunc() {
  if (checkIn('.eqdiv') === false) {
    errIn();
  } else {
    let arr = [];
    document.querySelectorAll('.eqdiv input').forEach(res => arr.push(Number(res.value)));
    const num = arr.length;
    const newarr = arr.reduce((a, b) => a + b);
    const mean = newarr / num;
    const resarr = [];
    arr.forEach(re => resarr.push((re - mean) * (re - mean)));
    const newresarr = resarr.reduce((c, v) => c + v);
    const norDev = Math.sqrt(newresarr / (num - 1));
    const dev = norDev / Math.sqrt(num);
    let mpv;
    if (!isNaN(dev)) {
      mpv = `${mean.toFixed(3)} ± ${dev.toFixed(3)}`;
    } else {
      mpv = `${mean.toFixed(3)}`;
    }
    displayResult(mpv);
  }
}

function unresFunc() {
  if (checkIn('.wrap-sub') === false) {
    errIn();
  } else {
    let allweight = [],
      allValues = [],
      subMeanArray = [],
      sub = [],
      semiFinal = [];
    document.querySelectorAll('.div2-2 input').forEach(w => allweight.push(Number(w.value)));
    const sumWeight = allweight.reduce((n, m) => n + m);
    document.querySelectorAll('.div2-1 input').forEach(s => allValues.push(Number(s.value)));
    for (i = 0; i < allweight.length; i++) {
      subMeanArray.push(allweight[i] * allValues[i]);
    }
    const sumMean = subMeanArray.reduce((a, b) => a + b);
    const mean = sumMean / sumWeight;
    allValues.forEach(s => sub.push(s - mean));
    for (i = 0; i < allweight.length; i++) {
      semiFinal.push(allweight[i] * sub[i] * sub[i]);
    }
    const alFinal = semiFinal.reduce((a, b) => a + b);
    const nDev = Math.sqrt(alFinal / allweight.length);
    const Dev = nDev / Math.sqrt(sumWeight);
    let mpv;
    if (isNaN(Dev)) {
      mpv = ` : No choice but the only value you gave which is ${allValues[0].toFixed(3)}`;
    } else {
      mpv = `${mean.toFixed(3)} ± ${Dev.toFixed(3)}`;
    }
    displayResult(mpv);
  }

}

function displayResult(wow) {
  document.querySelector('#output').innerHTML = `The Result is ${wow}`;
}
.wrap>div {
  display: none;
}


/* .uneqdiv{
   display: none;
} */

.container {
  padding-top: 100px;
  width: max-content;
  padding-bottom: 50px;
}

.wrap {
  margin-top: 50px;
}

.wrap-sub {
  display: flex;
}

.div2-1 {
  margin-right: 5px;
}

button {
  outline: none;
  transition: border .3s;
}

.active,
.active:focus {
  border-color: #46d84d;
}

button.reset:hover,
button.un-reset:hover {
  border-color: #f86868;
}

button.eqmore:hover,
button.un-eqmore:hover {
  border-color: #46d84d;
}

.errdiv {
  height: 40px;
  width: 100%;
  background-color: #df4f4f;
  color: #ffffff;
  display: flex !important;
  justify-content: center;
  align-items: center;
}

#output {
  padding-top: 20px;
}

h6 {
  margin: 0;
}

.tes {
  display: inline-block;
}

@media(max-width: 700px) {
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .container>h2 {
    font-size: 2rem;
  }
  button {
    width: 75%;
    max-width: 20rem;
  }
  .wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
  }
  .eqdiv {
    text-align: center;
  }
  .eqdiv input {
    max-width: 20rem;
    width: 75%;
  }
  .eqdiv button {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .uneqdiv {
    text-align: center;
    width: 100%;
  }
  .wrap-sub input {
    max-width: 25rem;
    width: 100%;
  }
  .uneqdiv .wrap-sub {
    width: 100%;
    margin-top: 40px;
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .wrap-sub h6 {
    font-size: 1.4rem;
  }
  .tes button {
    width: 100%;
  }
}
<html>

<head>
  <meta content="utf-8">
  <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
  <link rel="stylesheet" type="text/css" href="css/normalize.css">
  <link rel="stylesheet" type="text/css" href="css/skeleton.css">
  <link rel="stylesheet" type="text/css" href="css/index.css">
  <title>survey</title>
</head>

<body>

  <div class="container">
    <h2 class="jui">Please select the wanted method</h2>
    <button class="eqbtn">equal weight</button>
    <button class="uneqbtn">unequal weight</button>
    <div class="wrap">
      <div class="eqdiv">
        <h4>Enter the equal values</h4>
        <div>
          <input type="number" class="init">
        </div>
        <button class="eqmore">add more +</button>
        <button class="reset">reset</button>
        <button class="result button-primary">result</button>
      </div>
      <div class="uneqdiv">
        <h4>Enter the unequal values</h4>
        <div class="wrap-sub">
          <div class="div2-1">
            <h6>The Measurements</h6>
            <input type="number" class="un-init">
          </div>
          <div class="div2-2">
            <h6>The Weights</h6>
            <input type="number" class="un-weight">
          </div>
        </div>
        <div class="tes">
          <button class="un-eqmore">add more +</button>
          <button class="un-reset">reset</button>
          <button class="un-result button-primary">result</button>
        </div>

      </div>
    </div>
    <div id="output"></div>
  </div>
  <script type="text/javascript" src="cordova.js"></script>
  <script type="text/javascript" src="js/index.js"></script>
  <script type="text/javascript" src="js/app.js"></script>
</body>

</html>

0 个答案:

没有答案