How to pass the Syntax or Semantics written in the text field, to a Textarea

Asked

Viewed 215 times

0

Let’s go to such doubt, this is more a doubt than a logical reasoning.

I have some input on the HTML page, and the same transfers its value(s) to textarea, by clicking a button.

Great, so far so good! I developed as described above.

But I’ve been facing quite an obstacle.

When writing HTML semantics, I join the Javascript syntax. These text fields, do not pass syntax into the textarea.

This occurs after the inclusion of event onclick(), within the element img

Minified code, for analysis:

Javascript

 function gera(){
 var a = document.all.txt.value;

 document.all.cod.value='<img src="'+a+'" onclick="this.src=''; document.embeds[0].style.display ='block';"/>'
 }

HTML

<p>Video Thumbnail(Image):</p>
<input type="text" id="txt" value="http://"   size="60"/>

<p>Código Fonte:</p>
<textarea id="cod" rows="10" cols="50" style="color:indianred"></textarea>

<hr size=1 color=silver>

<center>
<input type="button" onclick="gera()" value="Gerar Codigo Fonte"/>
</center>
javascript html embed objects

  • You can put the code you have here or in a jsFiddle?

  • 1

    You gotta get away from this: .display ='block';"/>', must be .display =\'block\';"/>'. Are you filling the textarea with the input value or the other way around? In the text of the question it seems one thing in the code other.

  • Can you explain better what you want this line to do this.src=''; document.embeds[0].style.display ='block';?

2 answers

1

From what I could see, your mistake was not to have escaped the simple quotes inside your string. If you are using exactly this syntax in the project, you need to define the generate function differently as well, which is assigning it to a variable without using the var reserved word. If you do not assign it to a variable that way, it will be outside the global scope, and at the time of onclick will accuse that it is Undefined.

Follow your code with the above corrections in jsfiddle: https://jsfiddle.net/o7x6wdza/1/

0

By virtue of the comment of Sergio just above.

Have escaped the simple quotes from inside the string, was the key point for everything to go right in the textarea.

Behold:

function gera()
{
var a = document.all.a.value;
var b = document.all.b.value;
var c = document.all.c.value;
var d = document.all.d.value;
var e = document.all.e.value;

document.all.cod.value='<img id="v" src=\"'+b+'\" title="'+a+'" alt="'+a+'" onclick="this.src=\'\'; document.embeds[0].style.display=\'block\';"/><embed nocache="0" type="application/mplayer" width="'+d+'" height="'+e+'" showcontrols="true" autostart="1" src="'+c+'" style="display:none"/><br><span><a href="http://mplayerplug-in.sourceforge.net/" target="_blank"><img src="http://mplayerplug-in.sourceforge.net/plugin-art/mplayerplug-in.gif" border="0"></a></span>';
}

function ver()
{
var obj = document.all.cod.value;
var janela = window.open("","janela","width=500px, height=500px");
janela.document.write("<html>\n<head>\n");
janela.document.write("<title></title>\n");
janela.document.write("</head>\n<body>\n"+obj+"\n");
janela.document.write("</body>\n</html>\n");
}
<p>Titulo:</p>

<input type="text" id="a" value=""   size="60"/>

<p>URL Image:</p>
<input type="text" id="b" size="60" value="https://img.youtube.com/vi/XyelvuqYMhA/default.jpg" onblur="if(this.value == '') {this.value = 'https://img.youtube.com/vi/XyelvuqYMhA/default.jpg';}" onfocus="if(this.value == 'https://img.youtube.com/vi/XyelvuqYMhA/default.jpg') {this.value = '';}"/>

<p>URL Video:</p>
<input type="text" id="c" size="60" value="https://www.youtube.com/watch?v=XyelvuqYMhA" onblur="if(this.value == '') {this.value = 'https://www.youtube.com/watch?v=XyelvuqYMhA';}" onfocus="if(this.value == 'https://www.youtube.com/watch?v=XyelvuqYMhA') {this.value = '';}"/>

<p>Largura:</p>
<input type="text" id="d" value="176"   size="5"/>px

<p>Altura:</p>
<input type="text" id="e" value="144" size="5"/>px

<p>Código Embed:</p>
<textarea id="cod" rows="10" cols="50" style="color:indianred"></textarea>

<hr size=1 color=silver>

<center>
<input type="button" onclick="gera()" value="Gerar Codigo Fonte"/>&nbsp; &nbsp; &nbsp; &nbsp;<input type="button" onclick="ver()" value="Rodar Codigo Fonte"/>
</center>

Explaining each process

1) After filling in the fields it is time to generate the code embed to enter on the Site/Blog.

Once this is done, it will be time to execute.

2) The user clicks on this image of the video, which will then be disabled by syntax this.src=''.

Giving way to tag title that until then the tag img contained.

3) Then the object is recovered embed, by the method document.embeds[0].style.display = 'block', that was once hidden by the rule style="display:none".

Once discovered, the Video is displayed.

In other words, the mplayer plug-in is silently waiting for mouse click action on thumbnail, thus making its exhibition.

Browser other questions tagged javascript html embed objects

You are not signed in. Login or sign up in order to post.