Как визуализировать Div Content на основе значения из функции JavaScript - PullRequest
Новая
       60

Как визуализировать Div Content на основе значения из функции JavaScript

0 голосов
/ 03 ноября 2019

У меня есть сценарий, в котором содержимое div должно отображаться в соответствии со значением, возвращаемым функцией java-script

псевдо HTML: 

<div>
if(true==myfunction())
{
<p>True is returned from the javascript function</p>
}
else
{
<p>False is returned from the javascript function</p>
}
</div>

псевдо-JavaScriptfunction 

myFunction()
{
var x = false;

// Some code to decide value of x.

return x;
}

Я использую ядро ​​Asp.net, мой код Javacript присутствует в site.js, а html-код присутствует в cshtml.

Было бы очень полезно, если кто-то может предложитьподход к тому, как этого добиться. Примечание. Представленный код не является фактическим кодом, но представляет реальный сценарий.

Ответы [ 3 ]

0 голосов
/ 03 ноября 2019

Так много разных способов сделать это. Это действительно будет зависеть от вашего кода, а также от того, когда и как вы собираетесь устанавливать значения.

Следующий простой пример работает при нажатии кнопки. В вашем вопросе недостаточно информации, чтобы понять, является ли это лучшим вариантом для вас.

Предложите обновить ваш вопрос реальным кодом, чтобы вы могли получить ответ, который ближе к тому, что вам действительно нужно. Пожалуйста, включите любые сообщения об ошибках, которые вы получаете тоже. 

function myFunction() {
  var spn = document.getElementById("jsValue");
  var val = (this.value == "1") ? "True" : "False";
  spn.textContent = val;
}

window.onload = function() {
  var b = document.querySelectorAll("button");
  var i, max = b.length;
  for(i=0;i<max;i++) {
    b[i].addEventListener("click",myFunction,false);
  }
}
<p><span id="jsValue">unknown</span> is returned from the javascript function</p>
<p><button value="1">Set true</button> <button value="0">Set false</button></p>
0 голосов
/ 03 ноября 2019

Вы можете создать новый узел DOM и затем добавить его к телу с условием или чем-либо еще. 

<div id="div1"></div>

<script>
  function myFunction(x) {
    var para = document.createElement("p");
    if (x === true) {
      var node = document.createTextNode(
        "True is returned from the javascript function."
      );
      para.appendChild(node);
    } else {
      var node = document.createTextNode(
        "False is returned from the javascript function."
      );
      para.appendChild(node);
    }
    var element = document.getElementById("div1");
    element.appendChild(para);
  }

  myFunction(true);
</script>

больше информации: https://www.w3schools.com/js/js_htmldom_nodes.asp

0 голосов
/ 03 ноября 2019

Это может быть один подход 

const par = document.createElement('p');
par.innerHTML = `${x ? 'True' : 'False'} is rendered from javascript function`;

document.getElementById('idx').appendChild(par);

Вам необходимо присвоить идентификатор тегу div html<div id="idx"></div>

...