HTML code inside <Script> tag

Question

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>

html is not javascript, can´t mix both that way as in php. You need to properly create the elements and add them to the dom. Or have them both in dom hidden and just show the one you want — juvian
– juvian, Commented Dec 23, 2015 at 20:03
@FelipeAlarcon And that's what we're here for: To help people understand. Not berate them for asking a question. — maiorano84
– maiorano84, Commented Dec 23, 2015 at 20:45

Poul Kruijt · Accepted Answer · 2015-12-23 20:13:30Z

4

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>

answered Dec 23, 2015 at 20:13

Poul Kruijt

72.3k12 gold badges152 silver badges152 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Richard Hamilton Over a year ago

My vote would actually go to this one. It's more concise and DRYer than my answer

mcgraphix Over a year ago

I don't think we should encourage folks new to this kind of thing to inline HTML in their Javascript code. It leads to the dark side :-)

Poul Kruijt Over a year ago

Weren't we all doing that in the beginning :)?

Richard Hamilton · Accepted Answer · 2015-12-23 20:19:37Z

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

    }
}

mcgraphix · Accepted Answer · 2015-12-23 20:24:45Z

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.

Hey man thanks for taking the time to help me out. With the fiddle link that you provided, one of the iframes does not display the video, do you have any idea what would cause that? I couldn't pinpoint the root. Thanks again.
I just took your HTML directly (except I fixed the mispelled iframe closing tag). However, on closer inspection it looks like part of your HTML might be missing. You have an opening <iframe> tag but it doesn't have a closing bracket. Then you have <source> tag starting. Make sure your HTML works when you put it right in the HTML. Then just move the working HTML inside the script tag as I had it.

Ludovic C · Accepted Answer · 2015-12-23 20:58:24Z

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>

Collectives™ on Stack Overflow

HTML code inside <Script> tag

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Linked

Related