Enter a value in a "text/html" script via another script - javascript

Maybe this is a naive question but I wonder if there is a way to enter a value in a "text/html" script via another script, something like the following example which, by the way, does not work for me.
<script id="Block" type="text/html">
<input type="text" id="InputID"/>
</script>
<script>
document.getElementById('InputID').value = 'some text';
</script>

Setting the type of a <script> element to text/html is a hack for including some HTML source code in an HTML document without it being rendered so that you can later read the script element and do something with the HTML source code.
const raw_html = document.querySelector("script[type='text/html']").textContent;
This works because normal HTML rules do not apply to a script element, < has no special meaning there (in HTML 4 terms, the script element contains CDATA).
The modern equivalent is the <template> element.
You have no <input> element, so you can't find it in the DOM and you can't set a value to it.
If you want to do that, you first need to add it to the DOM.
const raw_html = document.querySelector("script[type='text/html']").textContent;
const container = document.querySelector("#container");
container.innerHTML = raw_html;
document.getElementById('InputID').value = 'some text';
<script id="Block" type="text/html">
<input type="text" id="InputID"/>
</script>
<div id="container"></div>

Related

Markup and Execution of HTML, CSS and JavaScript from seperate textareas

I found a code for real time markup for HTML and CSS in different textareas using a jQuery function that outputs in an iframe:
HTML
<div class="container grid">
<form>
<h3>HTML</h3>
<textarea id="html" class="edit"></textarea> // TEXTAREA FOR HTML
<h3>CSS</h3>
<textarea id="css" class="edit"></textarea> // TEXTAREA FOR CSS
</form>
</div>
<div class="output grid">
<iframe></iframe>
</div>
JQUERY for markup
function() {
$(".grid").height($(window).height());
var contents = $("iframe").contents(),
body = contents.find("body"),
styleTag = $("<style></style>").appendTo(contents.find("head"));
$("textarea.edit").keyup(function() {
var $this = $(this);
if ($this.attr("id") === "html") {
body.html($this.val());
} else {
// it had to be css
styleTag.text($this.val());
}
});
})();
What if I wanted another textarea for javascript? I'm guessing you can't execute it in real time so I have to include a button to to run an eval()
But how?
In your HTML you can have another textarea for the javascript code.
In your textarea.edit event handler, you can add another check for javascript and use something like this -
$iframeEl.append(`<script>${textarea.val()}</script>`);
This line would execute your script as well because the browser re parses the document whenever it encounters a DOM change and it would also execute the script tag.
We should anyways refrain on using the eval keyword because it is an expensive operation and is advised not to be used.

How can I render MathJax when some element is clicked?

I have an input field in which I type LaTeX commands which must be rendered as MathJax when I click a button. I use the textContent property to set the content of the div element to whatever I type in the input field. However, the browser doesn't render MathJax and shows the content of div as LaTeX commands. I think this is probably because MathJax is rendered when the document is loaded. Is there some way by which I can render MathJax when the button is clicked? I have no knowledge of jquery or any other JavaScript library. Is there some way of doing this without using them or is it necessary to use them?
<head>
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML">
<!-- The source is used to render mathjax -->
function dispMJ() {
var a = document.getElementById("mj").value;
document.getElementById("disp").textContent = a;
}
</script>
</head>
<body>
<input type="text" id="mj">
<input type="button" value="render MJ" onclick="dispMJ();">
<div id="disp"></div>
</body>
you should use the QUEUE to tell MathJax to rerender the div, Look a full example here http://codepen.io/damianfabian/pen/EgWEpv?editors=1000
UpdateMath = function () {
var TeX = document.getElementById("MathInput").value;
QUEUE.Push(["Text",math,"\\displaystyle{"+TeX+"}"]);
}

Dynamically generated script not working

I have a contenteditable div where you type javascript which gets outputted into an empty script tag.
<div contenteditable="true" id="script-generator"></div>
<div id="save-script">Save</div>
<script type="text/shorthand" id="script">
</script>
So you write your script in the div, click save and I have some JS which gets the html of the contenteditable div and adds it to an empty script tag.
$('#save-script').click(function() {
var script = $('#script-generator').html();
$('#script').html(script);
});
So far this works. But the generated script has no effect. The browser must not recognise the script because it wasn't there on page load? How do I make the script take effect without reloading the page?
Note: The type/shortand on the script is because I'm using a plugin which converts shortand words into actual Javascript. So the user would just need to write shorthand into the contenteditable div, and the plugin would convert that to JS. This might be adding to the problem?
I don't think it works to modify an existing <script> element. If you want the script to be executed you need to add a new element.
$('#save-script').click(function() {
var script = $('#script-generator').html();
$("#script").text(script);
ShortHand.parseScripts();
});
Correct - you need to create the script tag to have it execute after load.
$('head').append($('<script />', {html: script}));
...which means you can remove your empty script tag.
I have set up a test that's similar to what you have been looking for. Take a look and see if that helps.
Working Demo
Test code:
<div id="script" style="display:none">
alert(4+4);
</div>
<input id="sLoad" type="button" value="Load/Execute Script" />
$('#sLoad').click(function(){
//You may want to append to the head
$('<script/>').append( $('#script').html() ).appendTo('#script');
});

How to print one specific Javascript variable in HTML?

I want to ask how I can print a Javascript variable in HTML form (e.g. output it on the screen)?
Here is my JS code:
<script type="text/javascript">
var howLongIsThis = myPlayer.duration();
</script>
This var howLongIsThis = myPlayer.duration(); is Jquery variable!
So how i can show this value in HTML page?
Set it to be the innerHTML or value of a html element:
var howLongIsThis = myPlayer.duration();
var displayEl = document.getElementById("duration");
displayEl.innerHTML = howLongIsThis;
or if you want in in a form field:
displayEl.value = howLongIsThis;
Assuming you have a <div id="example"></div> somewhere in your HTML, you want to run JavaScript after the DOM has loaded which adds the value you want to that div. In jQuery (which you specified in your question you're using), this would simply be:
$('div#example').html(myPlayer.duration());
Here's a fiddle: http://jsfiddle.net/RyanJW/QjXKL/2/
Try this,
your HTML
<input type="text" id="logId" />
<div id="logId1"></div>
js Script
var howLongIsThis = myPlayer.duration();
document.getElementById("logId").value=howLongIsThis;
document.getElementById("logId1").innerHTML=howLongIsThis;
hope this will give you an idea to solve your problem

jQuery .append() not appending to textarea after text edited

Take the following page:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"/>
</head>
<body>
<div class="hashtag">#one</div>
<div class="hashtag">#two</div>
<form accept-charset="UTF-8" action="/home/index" method="post">
<textarea id="text-box"/>
<input type="submit" value ="ok" id="go" />
</form>
<script type="text/javascript">
$(document).ready(function() {
$(".hashtag").click(function() {
var txt = $.trim($(this).text());
$("#text-box").append(txt);
});
});
</script>
</body>
</html>
The behavior I would expect, and that I want to achieve is that when I click on one of the divs with class hashtag their content ("#one" and "#two" respectively) would be appended at the end of the text in textarea text-box.
This does happen when I click on the hash tags just after the page loads. However when I then also start editing the text in text-box manually and then go back to clicking on any of the hashtags they don't get appended on Firefox. On Chrome the most bizarre thing is happening - all the text I type manually gets replaced with the new hashtag and disappears.
I probably am doing something very wrong here, so I would appreciate if someone can point out my mistake here, and how to fix that.
Thanks.
2 things.
First, <textarea/> is not a valid tag. <textarea> tags must be fully closed with a full </textarea> closing tag.
Second, $(textarea).append(txt) doesn't work like you think. When a page is loaded the text nodes inside the textarea are set the value of that form field. After that, the text nodes and the value can be disconnected. As you type in the field, the value changes, but the text nodes inside it on the DOM do not. Then you change the text nodes with the append() and the browser erases the value because it knows the text nodes inside the tag have changed.
So you want to set the value, you don't want to append. Use jQuery's val() method for this.
$(document).ready(function(){
$(".hashtag").click(function(){
var txt = $.trim($(this).text());
var box = $("#text-box");
box.val(box.val() + txt);
});
});
Working example:
http://jsfiddle.net/Hhptn/
Use the val() function :)
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div class="hashtag">#one</div>
<div class="hashtag">#two</div>
<form accept-charset="UTF-8" action="/home/index" method="post">
<textarea id="text-box"></textarea>
<input type="submit" value ="ok" id="go" />
</form>
<script type="text/javascript">
$(document).ready(function(){
$(".hashtag").click(function(){
var txt = $.trim($(this).text());
$("#text-box").val($("#text-box").val() + txt);
});
});
</script>
</body>
</html>
Does that help?
The reason append does not seem to work is because the value of the textarea is made up of the child node, but by treating it as multiple seperate nodes the screen won't update, according to my Firebug. Firebug will show me the updated child nodes, but NOT the text I typed manually into the textarea, whereas the screen shows me the manually typed text but not the new nodes.
You can reference by value of textarea.
$(document).ready(function () {
window.document.getElementById("ELEMENT_ID").value = "VALUE";
});
function GetValueAfterChange()
{
var data = document.getElementById("ELEMENT_ID").value;
}
works fine.
if(data.quote) $('textarea#message').val($('textarea#message').val()+data.message +' ').focus();

Categories