JavaScript不会运行

我正在尝试开发一个计算折扣价格并显示在网页上的网页。最主要的是用相同的onclick事件触发这两个函数，但它不会运行，就我而言，我不知道这些函数是写错了还是其他东西。我需要在一个ID =“折扣”中显示折扣百分比，并在另一个ID =“结果”中显示折扣价格。无法弄清楚我在哪里搞砸，任何帮助将不胜感激。JavaScript不会运行

function calculate() { 
 
    var product_name = document.getElementById('name').value; 
 
    var product_price = document.getElementById('price').value; 
 
    var select = document.getElementById("sale"); 
 
    var selected = select.options[select.selectedIndex].value; 
 
    if (selected == summer) { 
 
    var discount_price = product_price - (product_price * 0.10); 
 
    } else if (selected == newyear) { 
 
    var discount_price = product_price - (product_price * 0.05); 
 
    } else { 
 
    var discount_price = product_price - (product_price * 0.15); 
 
    } 
 
    // body... 
 
} 
 

 
function display_sale() { 
 
    if (selected == summer) { 
 
    document.getElementById('discount').innerHTML = "The discount is 10%"; 
 
    } else if (selected == newyear) { 
 
    document.getElementById('discount').innerHTML = "The discount is 5%"; 
 
    } else { 
 
    document.getElementById('discount').innerHTML = "The discount is 15%"; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
    <form> 
 
    <h1>DISCOUNT PRICE</h1> 
 
    <table> 
 
     <tr> 
 
      <td>Product Name</td> 
 
      <td colspan="2"><input type="text" name="name" id="name" pattern="[a-zA-Z\s]+" required="required"></td> 
 
     </tr> 
 
     <tr> 
 
      <td>Product Price</td> 
 
      <td colspan="2"><input type="text" name="price" id="price" pattern="([1-9][0-9]*(\.[0-9]*[1-9])?|0\.[0-9]*[1-9])" required="required"></td> 
 
     </tr> 
 
     <tr> 
 
      <td>Season</td> 
 
      <td colspan="2"><select id="sale"> 
 
        <option value="summer">SUMMER SALE</option> 
 
        <option value="newyear">NEW YEAR SALE</option> 
 
        <option value="clearance">CLEARANCE SALE</option> 
 
       </select> 
 
      </td> 
 
     </tr> 
 
    </table><br/> 
 
    <div style="margin-left: 40%"> 
 
    <button type="submit" onclick="calculate();"> GET DISCOUNT PRICE</button> 
 
    </div> 
 
    <div id="discount"> 
 

 
    </div> 
 
    <div id="result"> 
 

 
    </div> 
 
</div> 
 
</form> 
 
</body> 
 

 
</html>

来源

2017-08-06 Shivam Srivastava

单击按钮，检查开发者工具控制台 - 看到错误'的ReferenceError：选择不defined' - 那是因为你使用了一个没有定义的变量'selected'。提示：'夏天'和'新年'也没有定义 –

我已经在脚本中定义它，不会那么工作？如果我使用var定义，或者我应该把值放在“”内？ –

也许在'calculate'中，但不是'display_sale'，而不是在'display_sale'中，而不是'claculate'中的定义在display_sale中不可用 –

只是定义选择变出来的功能范围和使用字符串的报价标记（”“或'“）

编辑：请阅读范围。你应该定义你的选定的变量，在你的函数可以访问它的地方。当你在js中使用字符串时，你应该把它们包装在''中，请仔细检查你的代码，应用它，如果你有任何其他问题，请回到这里。编辑2：如果你不想提交任何东西，也不要在你的按钮元素中输入type =“submit”。如果你想在javascript中提交表单，你可以为你的表单设置一个id并获取js中的元素并使用元素的提交功能。

var selected; 
 
function calculate() { 
 
    var product_name = document.getElementById('name').value; 
 
    var product_price = document.getElementById('price').value; 
 
    var select = document.getElementById("sale"); 
 
    selected = select.options[select.selectedIndex].value; 
 
    if (selected == 'summer') { 
 
    var discount_price = product_price - (product_price * 0.10); 
 
    } else if (selected == 'newyear') { 
 
    var discount_price = product_price - (product_price * 0.05); 
 
    } else { 
 
    var discount_price = product_price - (product_price * 0.15); 
 
    } 
 
    // body... 
 
} 
 

 
function display_sale() { 
 
    if (selected == 'summer') { 
 
    document.getElementById('discount').innerHTML = "The discount is 10%"; 
 
    } else if (selected == 'newyear') { 
 
    document.getElementById('discount').innerHTML = "The discount is 5%"; 
 
    } else { 
 
    document.getElementById('discount').innerHTML = "The discount is 15%"; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
    <h1 style="margin-left: 35%"><em>DISCOUNT PRICE</em></h1> 
 
    <table> 
 
     <tr> 
 
     <td>Product Name</td> 
 
     <td colspan="2"><input type="text" name="name" id="name"></td> 
 
     </tr> 
 
     <tr> 
 
     <td>Product Price</td> 
 
     <td colspan="2"><input type="text" name="price" id="price"></td> 
 
     </tr> 
 
     <tr> 
 
     <td>Season</td> 
 
     <td colspan="2"> 
 
      <select id="sale"> 
 
      <option value="summer">SUMMER SALE</option> 
 
      <option value="newyear">NEW YEAR SALE</option> 
 
      <option value="clearance">CLEARANCE SALE</option> 
 
      </select> 
 
     </td> 
 
     </tr> 
 
    </table><br/> 
 
    <div style="margin-left: 40%"> 
 
     <button type="submit" onclick="display_sale(); calculate();"> GET DISCOUNT PRICE</button> 
 
    </div> 
 
    <p id="discount"></p> 
 
    <p id="result"></p> 
 
    </div> 
 
</body> 
 

 
</html>

来源

2017-08-06 23:35:49 Javad

它的工作，但是当我应用html表单验证功能它只是立即执行点击和消散器，为什么发生 –

更新该片段请检查@javad –

检查更新的答案还修复您的js代码，以及html以及@ShivamSrivastava – Javad

JavaScript不会运行

回答

相关问题