如何在模态助推器中显示计算结果(JS)

How to show the result of a calculation (JS) in a modal boostrap?

本文关键字:结果 计算 JS 显示 模态 助推器      更新时间:2023-09-26

我有一个html+JavaScript代码,它为用户显示了理想的冲浪板。它以表格(风格、经验、身高、体重)插入数据,网站会告诉你什么样的冲浪板是理想的。

我试过这个:

function calcularIMC(){  
var estilo = document.getElementById("estilo").value; 
var experiencia = document.getElementById("experiencia").value; 
var altura = document.getElementById("altura").value; 
var peso = document.getElementById("peso").value; 
var resultado = 5
  var imc = 0;
  if(altura >0 && peso >0){
    imc = peso / (altura * altura);
  }
 
   
    if(estilo == "Surf"){            
           if((imc<=25) && (resultado == 5)){          
            document.write('<img src="https://pbs.twimg.com/profile_images/2478399688/6gyep59fumb340ima588_400x400.png">');
          }
        else{         
            document.write('<img src="2.png">');        
            }
       } 
    else if(estilo == "SUP"){  
          if((experiencia >= 3) && (imc <=29)){
            document.write('<img src="http://www.clickborde.com.br/image/data/produtos/prod_2109_815807521.jpg">');
          } else{
            document.write('<img src="http://www.clickborde.com.br/image/data/produtos/prod_2109_815807521.jpg">');
          }                       
       }
  }
<form method="post">
<span>Estilo</span><br>
<select name="estilo" id="estilo" value="estilo" required>
   <option disabled selected hidden>Escolha seu estilo</option>
   <option>SUP</option>
   <option>Surf</option>
</select><br><br>
<span>Experiência</span><br>
<select name="experiencia" id="experiencia" required>
  <option disabled selected hidden>Escolha sua experiência</option>
  <option value="0">sem experiência</option>
  <option value="1">menos de 1 mês</option>
  <option value="2">até 3 meses</option>
  <option value="3">até 6 meses</option>
  <option value="4">1 ano ou mais</option>
</select>  <br> <br>
<span>Altura</span><br>
<select name="altura" id="altura" required>
  <option disabled selected hidden>Escolha sua altura</option>
  <option>1.60</option>
  <option>1.61</option>
  <option>1.62</option>
  <option>1.63</option>
  <option>1.64</option>
  <option>1.65</option>
  <option>1.66</option>
  <option>1.67</option>
  <option>1.68</option>
  <option>1.69</option>
  <option>1.70</option>
  <option>1.71</option>
  <option>1.72</option>
  <option>1.73</option>
  <option>1.74</option>
  <option>1.75</option>
  <option>1.76</option>
  <option>1.77</option>
  <option>1.78</option>
  <option>1.79</option>
  <option>1.80</option>
  <option>1.81</option>
  <option>1.82</option>
  <option>1.83</option>
  <option>1.84</option>
  <option>1.85</option>
  <option>1.86</option>
  <option>1.87</option>
  <option>1.88</option>
  <option>1.89</option>
  <option>1.90</option>
  <option>1.91</option>
  <option>1.92</option>
  <option>1.93</option>
  <option>1.94</option>
  <option>1.95</option>
  <option>1.96</option>
  <option>1.97</option>
  <option>1.98</option>
  <option>1.99</option>
  <option>2.00</option> 
</select><br><br>
<span>Peso</span><br>
<select name="peso" id="peso" required>
  <option disabled selected hidden>Escolha seu peso</option>
  <option>50</option>
  <option>51</option>
  <option>52</option>
  <option>53</option>        
  <option>54</option>
  <option>55</option>
  <option>56</option>
  <option>57</option>
  <option>58</option>
  <option>59</option>
  <option>60</option>
  <option>61</option>
  <option>62</option>
  <option>63</option>
  <option>64</option>
  <option>65</option>
  <option>66</option>
  <option>67</option>
  <option>68</option>
  <option>69</option>
  <option>70</option>
  <option>71</option>
  <option>72</option>
  <option>73</option>
  <option>74</option>
  <option>75</option>
  <option>76</option>
  <option>77</option>
  <option>78</option>
  <option>79</option>
  <option>80</option>
  <option>81</option>
  <option>82</option>
  <option>83</option>
  <option>84</option>
  <option>85</option>
  <option>86</option>
  <option>87</option>
  <option>88</option>
  <option>89</option>
  <option>90</option>
  <option>91</option>
  <option>92</option>
  <option>93</option>
  <option>94</option>
  <option>95</option>
  <option>96</option>
  <option>97</option>
  <option>98</option>
  <option>99</option>
  <option>100</option>
</select><br><br>
  <button type="submit" id="Enviar" data-toggle="modal" data-target="#myModal" onclick="calcularIMC();">Enviar</button>
    
</form> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-body">
            <script>  
            calcularIMC();
             </script>
        </div>
      <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

答案的计算将通过模态给出。答案的计算必须显示在modal中。我尝试将function calcularIMC()移动到HTML标记中的body模态,但没有成功。

这是一个代码php,它使得:

echo '<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
      <div class="modal-content">
      <div class="modal-body">';
echo '<img src="https://pbs.twimg.com/profile_images/2478399688/6gyep59fumb340ima588_400x400.png">';
echo '</div>
      <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
      </div>
      </div>
      </div>';
}

调用此代码时,将触发模态。我尝试在javascript中做同样的事情,用DOCUMENT.WRITE()替换ECHO,但没有成功。

我该怎么做?

在模态HTML中,创建一个带有id的空元素,稍后调用calcularIMC()时可以获得该元素,然后使用innerHTML在其中放置所需内容。

function calcularIMC(){
var estilo = document.getElementById("estilo").value; 
var experiencia = document.getElementById("experiencia").value; 
var altura = document.getElementById("altura").value; 
var peso = document.getElementById("peso").value;
var modalContent = document.getElementById('modalContentContainer');
var resultado = 5;
  var imc = 0;
  if(altura >0 && peso >0){
    imc = peso / (altura * altura);
  }

    if(estilo == "Surf"){            
           if((imc<=25) && (resultado == 5)){          
            modalContent.innerHTML = '<img src="https://pbs.twimg.com/profile_images/2478399688/6gyep59fumb340ima588_400x400.png">';
          }
        else{         
            modalContent.innerHTML = '<img src="2.png">';        
            }
       } 

    else if(estilo == "SUP"){  
          if((experiencia >= 3) && (imc <=29)){
            modalContent.innerHTML = '<img src="http://www.clickborde.com.br/image/data/produtos/prod_2109_815807521.jpg">';
          } else{
            modalContent.innerHTML = '<img src="http://www.clickborde.com.br/image/data/produtos/prod_2109_815807521.jpg">';
          }                       
       }
  }

模式HTML:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-body">
            <div id="modalContentContainer">
            </div>
        </div>
      <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

工作jsfiddle:https://jsfiddle.net/damo_s/0po1sh79/