I have a situation where I'd like to be able to update some default text in a <p> tag wrapped inside of a <div> tag but so far I have been unable to find a good solution for accomplishing this.
Here's a snippet of the HTML that I'd like to edit:
<div class="edit-text">
<p> Default text </p>
</div>
I would like to reach in to the <p> tag and clear the text and/or update the text with something different.
I have tried a few different ways of editing the text, including finding the element and interacting with it:
var edit = driver.wait(until.elementLocated(By.xpath("//div[#class='edit-text']/p")))
edit.click()
edit.clear()
edit.sendKeys('Hello')
But this doesn't ever seem to work. Is there something else that's going on that I'm failing to see?
I've seen a few other posts uses executeScript but I can't find a good way to use that approach and update the text the with the elements that this HTML uses because the browser doesn't seem to support finding elements by xpath.
After some experimenting a little bit I was able to get the solution by using executeScript and document.querySelector to locate the css.
document.querySelector(".edit-text").innerHTML = "Hello world"
Related
I have a JavaScript function that uses document.innertext in order to change the text value of one of my <p> elements. I want to make sure that some of the text has different colour, and from what I've gathered the best solution is to use <span> tags inside the <p> element. If I hardcode this into the html, it works fine.
However, if I use my innertext function to overwrite the content of my <p> tag, the <span> is instead printed out as if it was just a string. If I use the browser inspector then the <span> is highlighted in black, meaning it is seen as a string. Both Chrome and Firefox do this and my page is a .php although if I rename it to .html it has the same effect. All the millions of code snippets online that do the exact same thing work for some reason, but mine doesn't.
The function is basically something like this document.getElementById("message").innerText = `<span style="color: red;">sample</span>: text`; Instead of rendering "sample" in red and "text" in black, it renders "< span style="color: red;">sample text" all in black.
I hope I made myself clear. Thanks in advance for any help.
you need to use innerHTML property of document.
for ex:
document.getElementById("message").innerHTML = "<span style="color: red;">sample</span>: text";
I hope this would help you!
Happy coding!
The link below is supposed to reveal more text when clicked, which it does, however the text uses all default styling, which cannot be seen on my black background that I use for the page. I have tried to style the tag where the text is added through JavaScript, but the added text still uses the default style.
Below is the code I have used:
HTML:
<p>
This movie might seem boring to you at first and you
might not get it after <br>first time viewing, like I did. But this
is one of the greatest movies ever made.....
Read More
<p id="atext" class="atext">dqdas</p>
<script src="Home.js"></script>
</p>
and JavaScript:
function more(e) {
e.preventDefault();
document.getElementById("atext").style.color= "white";
document.getElementById("atext").outerHTML = 'It touches many issues in our lives and packs a hell of a plot twist';
}
Simply use innerText rather then outerHTML. This should solve the issue.
I believe this happens because setting the HTML of an element overwrites any styles it may have. Setting the text does not do this.
Also, it is generally best to use innerText when necessary, as it reduces the risk of errors like yours occurring.
Main Target :
To create a website that will have a live preview of an HTML/CSS code.
More specifically :
The HTML/CSS code will be editable form the user in some specific parts. So, the code in the live preview will not derive from text areas but from divs.
Image of what I am trying to do :
So, in my Previous Question I tried to find a way to make the live preview box work after getting the code from the black boxes. It did not work because the code was given in a div tag and not a textarea. I would like to add that the code in the div tags use xmp tags because some parts are editable from the user.
Now, I have replaced the divs with textarea tags but the EDIT function does not work.
Main Question :
How do I edit parts of a textarea text? Below, I made it work for a div tag but not a textarea. How can I make the following work for a textarea?
$('input#thebox1').keypress(function(e) {
console.log($(this).val());
if(e.which == 13 && $(this).val().length > 0) {
var c = $(this).val();
$('.popup1').removeClass().addClass(c).text(c);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Replace Title Background Color: </div><input type="text" id='thebox1'>
<div id="copyTarget1" class="innerbox css">
<blockquote>
<pre>
<code>
.title
{
background: #<b class="popup1" style="color:#FF0000;">value </b>;
vertical-align: middle;
}
</code>
</pre>
</blockquote>
</div>
<br><br><br><br><br><br>
I thought about taking another approach to make your life easier using Ace (Cloud9 Editor). It is an awesome solution to get code editors for different languages. All built in JavaScript. It is quite easy to integrate. I just downloaded it to create the case you are trying to build.
You can find the example I have just made here: https://dubaloop.io/dev/html_css_js_editor/
Basically, you load the library for ace:
<script src="src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
Then you create a "pre" container for your HTML, CSS, JavaScript editor:
<pre class="editor" id="editor_js">
function foo(items) {
alert('works');
}</pre>
You will be able to convert them into code editor by using the function:
var editor_js = ace.edit("editor_js");
editor_js.setTheme("ace/theme/monokai");
editor_js.session.setMode("ace/mode/javascript");
It will generate a nice code editor that can through error, warnings, etc. You also have different themes. It is very user friendly as you could see. In my example I just get the content of each code container and send it to an blank iframe that. In order to retrieve the content you can use:
editor_js.getValue();
Check the source code for example I sent you above. I also created .zip with the example here: https://dubaloop.io/dev/html_css_js_editor/example.zip
Have a look to see if this would work for you.
GitHub repo for ACE: https://github.com/ajaxorg/ace-builds
I hope it helps.
UPDATE:
I decided to update the response to replay to your last comment. A few things about it:
First, I updated the code in the link I sent you previously: https://dubaloop.io/dev/html_css_js_editor/
The idea was to check the guide to see how you can manipulate the input and adjust it to what you need. They have great manipulation options. This is the guide: https://ace.c9.io/#nav=howto&api=editor
I just made a short version of what you are trying to do: I am replacing the content for the <h1> in HTML editor, by entering it in a textfield input; similar to what you are trying to achieve. I set the html code editor as a readonly so you cant edit on it. Have a look and let me know.
Second, I created another example using your code. You can check it here: https://dubaloop.io/dev/html_css_js_editor/example.html
I noticed that the first problem you were having was related to how you were triggering the preview update ($('.innerbox').on("keyup"...)). There was not keyup event there. For now I set it on any input when you hit enter. The other big problem, and probably the main one you had was how you were accessing the iframes through jQuery. You need to use $('selector').contents().find('selector2'). Finally another problem was the you were retrieving the data getting the attribute value from your code wrapper. What you need to get is the actual content as flat text in order to avoid other html content. In order to do that you need to use .text() (Please check the updated GetHtml() and GetCss() functions).
I hope you can make it work from here. Still, I like option 1 :P
I hope it helps.
OK, I'm going to get a bad rep here for asking too many questions. I have some javascript that dynamically changes content on my page. This works just fine. My issue is that I need to be able to tag all text with 'class="CushyCms"' in order to allow access to the site owner for easy content changes. Here is the basic code for the script, there is more than just the one set but this will give you an idea of what I'm doing. I tried adding the class tag inside the innerHTML, but Cushy couldn't see it.
<script language="javascript" type="text/javascript">
function changeText(idElement) {
if(idElement==0){
document.getElementById('tagmain').innerHTML ='<class="cushycms">Default text to display on page load.';
document.getElementById('tagtext').innerHTML ='<class="cushycms">More default body text on page load.';
}
</script>
I am looking for a way to put these text fields in a hidden div and pull the textContent from there. This is an example of a section that works with Cushy
<h2 class="cushycms">Preventative Maintanence</h2>
I'm beginning to get the hang of javascript, though Java is my primary language. I want to be more rounded i my langauge skills so I am trying to leanr as much as I can. Thanks in advance for the help.
Cushy CMS requires an actual HTML in order to edit. You could use the following:
HTML
<p id="tagmain-replace" class="cushycms" style="display:none;"></p>
<p id="tagmain">Default Text</p>
JS
var newText = document.getElementById('tagmain-replace').innerText;
if( newText != ''){
document.getElementById('tagmain').innerText = newText;
}
I would suggest changing the IDs to better work with your project.
I have one question. I try to develop a little WYSIWYG editor.
I would like create a <h1> button which allows me to generate a <h1> title (by clicking on button after text selection in <p> element).
I obtain the selection with window.getSelection().... But now, I would like to put my append("<h1>my text selected</h1>") just before the <p>. It’s my problem, because my <p> elements don’t have id or class. So do you know a means to put my append just before the <p> where my text has been selected?
I don’t know if with my bad English you’ll understand me!
Thanks very much for your help.
Have you tried using something like jQuery?
$("#yourButton").click(
function(){
$('<h1>'+window.getSelection()+'</h1>').insertBefore("???");
}
);
Just replace "???" with the location of your <p> element. How you would find that location depends how you wrote your HTML. Feel free to post your HTML for more assistance.