I've coded everything but the jquery part isn't working.
Enter URL :<input type="text">
<button id="btn"> continue
</button>
<div contenteditable="true"
id="bod">
Click here to start typing</div>
$(document).ready(function(){
$("btn").click(function(){
$("bod").append($('input').html('<img alt="" src="'+$(this).val()+'">'))
})
});
I'd prefer to use "input" or "textarea" instead of as I want to tag that field with ng-model (angularjs).
It seems like the goal you're aiming for is:
Firstly, make sure to reference your elements with an id selector using #.
Instead of $("bod"), use $("#bod"), as '#' indicates an ID.
Also, the way you were trying to retrieve the value for input was incorrect.
Remember to use an ID if you want the value of a specific item. Otherwise, you'll end up with an array by using a generic element selector. Since I assigned an id to your input, you should not just try to get a value off of $('input')
(I added a placeholder image address in your code, feel free to remove it)
Additionally, view the snippet in full screen as the small view may give the impression that your text is disappearing, but it's actually not. The positioning of the img element makes the baseline lower than the snippet viewer window.
$(document).ready(function(){
$("#btn").click(function(){
$("#bod").append('<img alt="" src="'+$('#inp').val()+'">');
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Enter URL :<input id="inp" type="text" value="http://placehold.it/300">
<button id="btn">continue</button>
<div contenteditable="true" id="bod">Click on this text to start writing</div>After reviewing your request, it seems that the appropriate JQuery code would look something like this:
$(document).ready(function(){
$("#btn").click(function(){
var bodyElement = $("#body");
var imageUrl = $("input").val();
$('<img alt="" src="'+ imageUrl +'">').insertAfter(bodyElement);
});
});
Exploring WCF data service has opened up new possibilities for enhancing web applications. I am currently experimenting with it, accessing it as demonstrated here. I am aware that the results from WCF data service can be utilized in other .NET application ...
I've been attempting to toggle the visibility of a div by clicking on another div, but I'm encountering an issue. The div becomes invisible on the first click only if it was visible initially. After that, it remains invisible and does not update. ...
Currently, I am in the process of developing a moderation bot for Discord. I am working on implementing a paid plan and as part of that, I require users to log in with their Discord account using OAuth2. This allows me to retrieve user data and identify wh ...
I recently encountered an issue with my JavaScript function that returns a list of elements with the class ".youtube", loops through them, and calls another function. The JavaScript logic is flawless, but I wanted to convert it into jQuery for better reada ...
Currently using Flot to create a graph displaying clicks per minute within the first 60 minutes of short URLs generated at . The graph currently displays data from minute 0 to minute 59. My query is about adjusting the data to start at 1 and end at 59, wh ...
I am looking to implement tooltip messages for the save and cancel buttons in Ext.ux.grid.RowEditor. For example, I want the save button to have a tooltip that says "Save the records" and the cancel button to have a tooltip that says "Cancel saving the rec ...
Recently, I came across TypeScript and after watching some video reviews, I see great potential in it. It seems to offer better code completion, implicit code documentation, and enhanced type safety for JavaScript. I'm currently in the process of con ...
I'm facing a challenge with my webpage. I have a section where the content of a div is loaded via ajax. This div contains forms, and after submission, it should update to display the new content without refreshing the entire page. Can anyone guide me ...
Encountering a problem with button hover functionality in a Next.js component using Tailwind CSS. The objective is to alter the button's background color dynamically on hover based on a color value stored in the component's state. This code func ...
At the moment, I am using the Month selector and Year selector for Date of Birth in the react-datepicker component within a guest details form. The current functionality is such that the selected date is highlighted on the calendar, which works fine. How ...
Looking to break down a large object into chunks of 100 and save each chunk in separate files using Node.js. However, struggling to figure out how to split an array with thousands of records into files of 100. Query: How can I divide an object's arr ...
function generateRandomNumbers(){ var max = document.getElementById('max').value; var min = document.getElementById('min').value; var reps = document.getElementById('reps').value; var i; for (i=0; i<reps ...
Trying to toggle the play/pause of a child video by clicking on a parent div can be challenging, especially when dealing with multiple instances of the same div and video. A normal function may only work for one specific video, as mentioned by @ken. I hav ...
For a project I am working on, I need to create JavaScript code that will be triggered by clicking on an <a> element. This code will then make a GET request to a web service that I am currently in the process of coding. Once the service returns a fil ...
I stumbled upon a website filled with engaging JavaScript games and was intrigued by how it saves high scores. The code snippet in question caught my attention: (new Request({ url: window.location.toString().split("#")[0], data: { ...
My goal is to create a zoomable canvas with rectangles arranged in a grid using pixi.js. Despite everything working smoothly, I'm facing heavy moire effects due to the grid. My understanding of pixi.js and webgl is limited, but I suspect that the anti ...
When working with Vue, I encountered a prop that is actually an array containing multiple types of items. For each item in this array, I want to create a property in a specific object. For example, if the array includes methods and count, I aim to construc ...
Currently, my webpage features a header at the top followed by a sidebar on the left and the main content area on the right. I am looking for a solution that will allow the main content area to scroll independently from the side bar. --------------------- ...
I'm facing an issue with a NaN error in my TypeScript code. I've defined a variable type as number and loop through an element to retrieve various balance amounts. These values are in the form of "$..." such as $10.00 and $20.00, so I use a repla ...
Currently, I am attempting to parse the URL within a Node.js environment. However, I am encountering issues with receiving null values from the following code. While the path value is being received successfully, the host and protocol values are returnin ...