Question

我有一个html + JavaScript代码，可以为用户显示理想的冲浪板。它以一种形式（风格，经验，身高，体重）插入数据，该网站将告诉您什么样的理想冲浪板。

我试过了：

＆＃13;

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">');
          }                       
       }
  }

＆＃13;

<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>

＆＃13;

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

这是一个代码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中执行相同的操作，将ECHO替换为DOCUMENT.WRITE()，但是您已成功。

我怎么能这样做？

Answer 1

在您的模态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/

如何在模态boostrap中显示计算结果（JS）？

1 个答案: