Blogger: Added Javascript but no result came out - javascript

First I edited my Blogger Template HTML.
I added the following script in the footer-1 section:
<script type="text/javascript">
//<![CDATA[
var copyTextareaBtn = document.querySelector('.js-textareacopybtn');
copyTextareaBtn.addEventListener('click', function(event) {
var copyTextarea = document.querySelector('.js-copytextarea');
copyTextarea.select();
});
var copyTextareaBtnb = document.querySelector('.js-textareacopybtnb');
copyTextareaBtnb.addEventListener('click', function(event) {
var copyTextarea = document.querySelector('.js-copytextareab');
copyTextarea.select();
});
//]]>
</script>
Next I added a blog with the following HTML:
<textarea class="js-copytextarea">text needed to copy</textarea>
<button class="js-textareacopybtn">
<img src="https://clipboardjs.com/assets/images/clippy.svg" width="13" alt="Copy to clipboard">
</button>
<textarea class="js-copytextareab">text 2 needed to copy</textarea>
<button class="js-textareacopybtnb">
<img src="https://clipboardjs.com/assets/images/clippy.svg" width="13" alt="Copy to clipboard">
</button>
Then I clicked on the first and then second button, nothing is copied.

Place all your code in one place (<div>, for example, or HTML widget).
And for scripts in Blogger use this structure:
<script type="text/javascript">
//<![CDATA[
your js code here
//]]>
</script>

you need to include jQuery for JavaScript. put this code before <head/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="js-copytextarea" id="1" readonly="" style="font-family: courier;">TTTEXTTT</textarea><button class="js-textareacopybtn" data-id="1">CCCOPYYY</button>
<script>
$('.js-textareacopybtn').on('click', function(event) {
var copyTextarea = $(this).data('id');
$('#' + copyTextarea)[0].select();
document.execCommand('copy');
});
</script>

Related

appendTo - unrecognized expression var

Updated code, trying to change the imo number with an onclick but vesslefinder just ignores everything in the onclick. Any advivce? Even when I hard code the imo it doesn't work.
The <a> 'button' link:
<a id="button_mssi_imo" href="#" data-toggle="modal" data-target=".bs-example-modal-lg" class="btn btn-success btn-xs"><i class="fa fa-truck"></i><p hidden="">9514767!</p> Track </a>
script:
<script>
$(document).on('click', '#button_mssi_imo', function( event )
{
alert('Button Clicked');
var imo_data = $(this).text();
// splits the string to get the imo
var imo_data_split = imo_data.split("!")[0];
var width="700";
var height="500";
var zoom="3";
var imo = imo_data_split;
var click_to_activate=false;
});
</script>
<script type="text/javascript" src="https://www.vesselfinder.com/aismap.js"></script>
I am trying to append some JavaScript into a div when a button is clicked (To use vesselfinder). I can manage to append the start of the script, but the second I start to add var it comes back with the unrecognised expressionmessage.
Could anyone please help me to what I am doing wrong? I have also tried everything on one line that results in the same error:
Here is what I think you wanted based on the code I get from https://www.vesselfinder.com/nl/embed
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
var myWrite = document.write, html=[];
document.write=function(str) { // redefine document.write to intercept
html.push(str);
}
$(function() {
$("#myDiv").html(html.join("")); // load into the div of your choice
});
</script>
<script type="text/javascript">
var width="700";
var height="500";
var zoom="3";
var click_to_activate=false;
</script>
<script type="text/javascript"
src="https://www.vesselfinder.com/aismap.js">
</script>
<div id="myDiv"></div>
Loading on click (does not work on SO)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
function writeVessel(imo) {
var script = [];
script.push('<script>');
script.push('var imo = "' + imo + '";');
script.push('var width="700";');
script.push('var height="500";');
script.push('var zoom="3";');
script.push('var click_to_activate=false;');
script.push('<\/script>');
script.push('<script src="https://www.vesselfinder.com/aismap.js"><\/script>');
console.log(script.join("\n"))
var iFrame = window.myIframe; // $("#myIframe")[0];
iFrame.document.write(script.join("\n"));
iFrame.document.close();
}
$(function() {
$(document).on('click', '.button_mssi_imo', function(e) {
e.preventDefault(); // cancel click
var imo = $(this).text().split("!")[0];
writeVessel(imo);
});
});
</script>
</head>
<body>
<a id="button_mssi_imo" href="#" data-toggle="modal" data-target=".bs-example-modal-lg" class="btn btn-success btn-xs"><i class="fa fa-truck"></i><p hidden="">9514767!</p> Track </a><br />
<iframe id="myIframe" name="myIframe" width="800" height="800" src="about:blank"></iframe>
</body>
</html>

jQuery .insertAfter() copying input field values

I have created a html webpage here:
http://diagrams.inse1d.info/wbt.html
Code:
<!DOCTYPE html>
<html>
<head>
<title>WBT Charts</title>
<link rel="stylesheet" type="text/css" href="wbt.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="wbt.js"></script>
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500,700' rel='stylesheet' type='text/css'>
</head>
<body>
<section>
<article>
<div id="wbtBlock">
<p>Press enter to save amendments</p>
<h1>Title of wbt:<input type="text" id="wbtTitle" /></h1>
<div id="graph">
<p>Graph to go here</p>
</div>
<p><strong>Notes: </strong></p>
<p><span><input type="textarea" id="wbtNote" /></span></p>
</div>
</article>
</section>
<button>Add New WBT Chart</button>
</body>
Here is the jQuery code I wrote:
$(document).ready(function() {
$("h1").keypress(function(e) {
//get
wbtTitle = $('#wbtTitle').val();
// Write text after enter
if (e.which == 13) {
$("h1").text(wbtTitle);
}
});
$("span").keypress(function(e) {
//get
wbtNote = $('#wbtNote').val();
// Write note after enter
if (e.which == 13) {
$("span").text(wbtNote);
}
});
//Insert new WBT on button click
$("button").each(function() {
$(this).click(function() {
var wbtSet = $( "article" ).html();
$(wbtSet).insertAfter('section');
});
});
});
What I want to do is set the title and some note text using input boxes which works using jQuery. I then want to add a copy of the html into another article when the button is pressed without copying the inputs previously made with the possibility of setting new values when the article is cloned. The process should repeat over and over again.
Here is an image to help explain:
I am quite new to jQuery, I think you need to use a loop to fix this, I read that a .each() can be used http://api.jquery.com/jQuery.each/ but not quite sure.
Any help will be appreciated. Thanks.
I think I got your answer.
I changed the html a bit, because you duplicated some id's with your approach, that's not good. id's have to be unique on a page. I simply changed them to classes.
<!DOCTYPE html>
<html>
<head>
<title>WBT Charts</title>
<link rel="stylesheet" type="text/css" href="wbt.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="wbt.js"></script>
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500,700' rel='stylesheet' type='text/css'>
</head>
<body>
<section>
<article>
<div class="wbtBlock">
<p>Press enter to save amendments</p>
<h1>Title of wbt:<input type="text" class="wbtTitle" /></h1>
<div class="graph">
<p>Graph to go here</p>
</div>
<p><strong>Notes: </strong></p>
<p><span><input type="textarea" class="wbtNote" /></span></p>
</div>
</article>
</section>
<button>Add New WBT Chart</button>
</body>
And of course the jQuery. I got rid of your first two functions because they had no purpose in this context.
$(document).ready(function() {
//Insert new WBT on button click
$("button").on('click', function() {
var title = $(this).prev().find('.wbtTitle').val();
var note = $(this).prev().find('.wbtNote').val();
var wbtSet = $(this).prev("section").html();
$(this).prev().find('.wbtTitle').replaceWith(title);
$(this).prev().find('.wbtNote').replaceWith(note);
$(this).prev("section").after('<section>' + wbtSet + '</section>');
});
});
Here is a working fiddel
Fixing the answer given by hitokun_s
window.onload = function() {
// Save a copy of the element wbtSet element on pageload
var wbtSet = $("article").clone();
$("button").each(function() {
$(this).click(function() {
// Append a new one to the holder of the wbSets
$(wbtSet).appendTo($('section'));
});
});
}
I think this is what you want to do.
window.onload = function() {
$("button").each(function() {
$(this).click(function() {
var wbtSet = $("article:first-child").clone();
wbtSet.find("input").val("");
$(wbtSet).appendTo($('section'));
});
});
}

How Can I Transfer Text From Input Box to Text Area?

I'm making a prototype for a chat client. At this stage, I'm just learning how to append the user's input to the text area above. However, no matter what I do, it doesn't seem to work. The only time it actually functioned correctly was in jsfiddle, but I can't get it to work when I load my actual HTML page.
It's worth mentioning that, at the advice of a tutorial, I already tried placing the script tag for my JQuery code at the end of the body instead of in the head. The tutorial said that it was essential for all elements be allowed to load before the JQuery code, so that's the way it had to be. As you can see below, the script tags are currently in the head, but that doesn't work either.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ChatStyle.css"/>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="Chat.js"></script>
<title>
Chat Client Prototype
</title>
</head>
<body>
<div ID="topBar">
</div>
<h2 ID="header">Chat Client</h2>
<div ID="chatBox">
<div ID="topBar2">
</div>
<div ID="header2">
Chat Client
</div>
<textarea ID="textArea" name="textArea">
</textarea>
<form ID="in">
<input ID="textField" type="text">
<button ID="send" type="button" name="Send" value="send">Send</button>
</form>
</div>
</body>
</html>
Chat.js
function sendText(){
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
});
});
}
Don't wrap document ready handler inside sendText() function, use that instead:
$(document).ready(function () {
$('#send').click(sendText);
});
function sendText(){
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
}
Well, it work if you change your button to submit type and bind the event to form submit:
$('#in').submit(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
return false;
});
http://jsfiddle.net/AztSB/
This seems to work for me:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ChatStyle.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').html($('#textArea').html() + text);
$('#textField').val('');
});
});
</script>
<title>
Chat Client Prototype
</title>
</head>
<body>
<div ID="topBar">
</div>
<h2 ID="header">Chat Client</h2>
<div ID="chatBox">
<div ID="topBar2">
</div>
<div ID="header2">
Chat Client
</div>
<textarea ID="textArea" name="textArea"></textarea>
<form ID="in">
<input ID="textField" type="text">
<input ID="send" type="button" name="Send" value="send"/>
</form>
</div>
</body>
</html>
Just don't wrap it in your function sendText:
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
});
});
You dont need to put it in a function. You can just leave it to Jquery :)
Your stuff in a FIDDLE to see
Jquery:
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').append(text);
$('#textField').val('');
});
UPDATE
Use append() to update the textarea with new text!

Javascript modal to replace prompt?

What is the best way to replace
var value = prompt("Enter a URL", "http://www.google.com/");
by a javascript modal (preferably pure javascript, if not possible then jquery)
Thanks!
You will need to change theway you call it, so it now follows event-driven programming style like that:
function prompt(question, callback) {
// here build a modal/form and after form submit:
callback(prompt_value);
}
And then use it like that:
prompt('Enter a URL:', function(result){
// do something with the result:
alert(result);
});
For better alerts, you can use bootboxjs.
For a pure JS modal, you can check ModaliseJS which is compatible with any css classes.
Example of ModaliseJS (change the classes to your design, just keep one .close, .confirm and .cancel as you please) :
<!DOCTYPE html>
<html>
<head>
<title>Modal example</title>
<link href="../../dist/modalise.css" rel="stylesheet">
<script src="../../dist/modalise.js" type="text/javascript">
</script>
<script src="app.js" type="text/javascript">
</script>
</head>
<body>
<h1>Example modal 1</h1><button id="openModal">Show the modal</button>
<div class="mdl mdl-fadein" id="exampleModal">
<div class="mdl-content mdl-slidein">
<center>
<div class="mdl-header mdl-band-primary">
<span class="close">X</span>
<h2>Example modal</h2>
</div>
<div class="mdl-body">
<h3>Content modal</h3>
input data: <input type="text" class="inputdata"><br>
</div>
<div class="mdl-footer mdl-band-primary">
<button class="confirm" onclick="return false">Do
thing</button><button class="cancel" onclick=
"return false">Cancel the thing</button>
</div>
</center>
</div>
</div>
</body>
</html>
Javascript :
var myModal = {}
window.onload = function(){
var btnOpen = document.getElementById('queryData'); // The button to open the modal
// if btnsOpen is not given, you can simply use myModal.show()
// Modalise(id, options);
myModal = new Modalise('exampleModal', {
btnsOpen : [btnOpen]
})
.attach()
.on('onConfirm', function(){
console.log(this.querySelector(".inputdata").value);
});
}

HTML tag inside JavaScript

I am trying to use some HTML tag inside JavaScript, but the HTML tag does not work. How can U use an HTML tag inside JavaScript? I wanted to use h1 but did not work.
if (document.getElementById('number1').checked) {
<h1>Hello member</h1>
}
You will either have to document.write it or use the Document Object Model:
Example using document.write
<script type="text/javascript">
if(document.getElementById('number1').checked) {
document.write("<h1>Hello member</h1>");
}
</script>
Example using DOM
<h1></h1> <!-- We are targeting this tag with JS. See code below -->
<input type="checkbox" id="number1" checked /><label for="number1">Agree</label>
<div id="container"> <p>Content</p> </div>
<script type="text/javascript">
window.onload = function() {
if( document.getElementById('number1').checked ) {
var h1 = document.createElement("h1");
h1.appendChild(document.createTextNode("Hello member"));
document.getElementById("container").appendChild(h1);
}
}
</script>
<html>
<body>
<input type="checkbox" id="number1" onclick="number1();">Number 1</br>
<p id="h1"></p>
<script type="text/javascript">
function number1() {
if(document.getElementById('number1').checked) {
document.getElementById("h1").innerHTML = "<h1>Hello member</h1>";
}
}
</script>
</body>
</html>
This is what I used for my countdown clock:
</SCRIPT>
<center class="auto-style19" style="height: 31px">
<Font face="blacksmith" size="large"><strong>
<SCRIPT LANGUAGE="JavaScript">
var header = "You have <I><font color=red>"
+ getDaysUntilICD10() + "</font></I> "
header += "days until ICD-10 starts!"
document.write(header)
</SCRIPT>
The HTML inside of my script worked, though I could not explain why.
here's how to incorporate variables and html tags in document.write
also note how you can simply add text between the quotes
document.write("<h1>System Paltform: ", navigator.platform, "</h1>");
JavaScript is a scripting language, not a HTMLanguage type. It is mainly to do process at background and it needs document.write to display things on browser.
Also if your document.write exceeds one line, make sure to put concatenation + at the end of each line.
Example
<script type="text/javascript">
if(document.getElementById('number1').checked) {
document.write("<h1>Hello" +
"member</h1>");
}
</script>
<div id="demo"></div>
<input type="submit" name="submit" id="submit" value="Submit" onClick="return empty()">
<script type="text/javascript">
function empty()
{
var x;
x = document.getElementById("feedbackpost").value;
if (x == "")
{
var demo = document.getElementById("demo");
demo.innerHTML =document.write='<h1>Hello member</h1>';
return false;
};
}
</script>
<div id="demo"></div>
<script type="text/javascript">
if(document.getElementById('number1').checked) {
var demo = document.getElementById("demo");
demo.innerHtml='<h1>Hello member</h1>';
} else {
demo.innerHtml='';
}
</script>

Categories