CODEWITHSUNDEEP
javascripthtml
Belbron Emanoel
Belbron Emanoel

Reputation: 23

HTML code inside <Script> tag

I am having a hard executing a chunk of HTML code inside my JavaScript logic, i was wondering if someone could point out what i am doing wrong? What i am trying to achieve is run either video based on probability. Here is my code: 

<html>
<head>.</head>
<body>
<script>
function myFunction() {
    var chance = (( Math.random()*100)+1)
    if (chance>= 0 || chance<=50){

        <video controls autoplay name="media">
    <source src="http://webmup.com/195a3/vid.webm" type="video/webm">
        </video>

}
    else {

        <video controls autoplay name="media">
        <iframe width="420" height="315"
    <source src="https://www.youtube.com/embed/IdtKbq3Omkw" type="video/webm">
        </ifrmae>
        </video>

}
}
</script>

</body>
</html>

Upvotes: 2

Views: 17819

Answers (4)

Ludovic C
Ludovic C

Reputation: 3065

You can't do that.

But you can use templates.

Both w/wo jQuery

function jq(){ return $('#useJquery').prop('checked') }
function replace(){ return $('#replace').prop('checked') }

$(function(){ $('#button').click(function(){run();}) })

function run(){  
  if (jq()) {
    if (replace()) {$("#container").html('');}
    $("#container").append($((Math.round(Math.random()) ? $("#template1") : $("#template2")).html()));
  } else {
    if (replace()){document.getElementById("container").innerHTML = ''}
    document.getElementById("container").innerHTML += document.getElementById( (Math.round(Math.random()) ? "template1" : "template2")).innerHTML;
    }
  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="useJquery"> Use jQuery ?
<input type="checkbox" id="replace"> Replace ?
<input type="button" id="button" value="Randomize!"/>
<script type="text/template" id="template1"><div>I chose : VIDEO 1</div></script>
<script type="text/template" id="template2"><div>I chose : VIDEO 2</div></script>
<div id="container"></div>

Upvotes: 0

mcgraphix
mcgraphix

Reputation: 2733

Since you didn't tag this with jQuery, I'll assume you aren't looking to use it. You can still use "templates" though, even without it:

Put each template in a script tag with type="text/template":

<script id="withIframe" type="text/template">
  <p>With Iframe</p>
  <video controls autoplay name="media">
    <iframe width="420" height="315" <source src="https://www.youtube.com/embed/IdtKbq3Omkw" type="video/webm">
      </iframe>
  </video>
</script>

<script id="withoutIframe" type="text/template">
  <p>Without Iframe</p>
  <video controls autoplay name="media">
    <source src="http://webmup.com/195a3/vid.webm" type="video/webm">
  </video>
</script>

<div id="holder">
</div>

Then in your javascript load the correct one based on your logic:

var iframe = document.getElementById("withIframe").innerHTML;
var noiframe = document.getElementById("withoutIframe").innerHTML;

function myFunction() {
  var chance = ((Math.random() * 100) + 1);
  var output = '';
  if (chance <= 50) {

    output = noiframe;

  } else {

    output = iframe;

  }

  document.getElementById("holder").innerHTML = output;
}

myFunction();

Note, there were some typos in your HTML and you condition would always return true:

 chance>= 0 || chance<=50

All positive numbers are greater than 0 or less than 50.

Here is a working fiddle: https://jsfiddle.net/mcgraphix/5cr4j1r7/

For more complex templates where you can pass data in to populate your template, you may want to look at Mustache or Handlebars.

Upvotes: 0

Richard Hamilton
Richard Hamilton

Reputation: 26434

html tags such as <video> should be put outside of a JavaScript function and inside the html's <body> tag.

First, you want to query your video element with getElementById. In both scenarios, we are creating a source element, so we can declare that outside of the conditional block.

We can set attributes such as src and type with the setAttribute function. We can then add the source element as a child to the video element with the appendChild function.

<body>
  <video id="my-video" controls autoplay name="media">
  </video>
</body>

function myFunction() {
    var video = document.getElementById("my-video");
    var source = document.CreateElement("source");
    source.setAttribute("type", "video/webm");

    var chance = (( Math.random()*100)+1)
    if (chance >= 0 || chance <= 50) {
        source.setAttribute("src", "http://webmup.com/195a3/vid.webm");
        video.appendChild(source);

    } else {
        var iframe = document.createElement("iframe");
        iframe.setAttribute("width", "420");
        iframe.setAttribute("height", "315");
        video.appendChild("iframe");
        source.setAttribute("src", "https://www.youtube.com/embed/IdtKbq30mkw");
        iframe.appendChild(source");

    }
}

Upvotes: 2

Poul Kruijt
Poul Kruijt

Reputation: 71911

As the comments state.. That is not how you should go about.. You can try this though, perhaps it will get you an idea on how to work with javascript in combination with html:

<html>
<head>
</head>
<body>
<div id="container"></div>
<script>
var container = document.getElementById('container');
function myFunction() {
    var chance = (( Math.random()*100)+1)
    if (chance>= 0 || chance<=50){

    container.innerHTML = '<video controls autoplay name="media"><source src="http://webmup.com/195a3/vid.webm" type="video/webm"></video>';

}
    else {

    container.innerHTML = '<video controls autoplay name="media"><iframe width="420" height="315"><source src="https://www.youtube.com/embed/IdtKbq3Omkw" type="video/webm"></iframe></video>';

}
}
</script>

</body>
</html>

Upvotes: 4

Related Questions