javascript - 通过参数将跨度内容发送到站点

Question

我目前正在一个网站上工作，您可以在该网站上学习语言，但对我真正想要的完形填空功能有疑问。 起初我使用 JSP 为网站生成 HTML，所以它必须是一个只需要 JS 和 HTML 的解决方案。

这里是我目前拥有的代码:

span.edit {
    background-color: #f4f4f4;
	color: #000000;
	font-weight: bolder;
    border-color: #f4f4f4 #f4f4f4 #000000;
    border-style: solid;
    border-width: 1px;
    display: inline-block;
    height: 25px;
    min-width: 80px;
    padding: 1px;
    vertical-align: baseline;
}

span.edit[contenteditable]:empty::before {
    content: attr(data-placeholder);
	font-weight: lighter;
    font-style: italic;
	color: #848484;
}

.sentence{
	min-width: 250px !important;
}

<div id="cloze">
	<h2>Cloze</h2>
	<div class="text">
		<p>Lorem <span contenteditable="true" data-placeholder="eingabe" id="var1" class="edit" title=""></span> dolor sit amet <span contenteditable="true" data-placeholder="eingabe" id="var2" class="edit" title=""></span>. Stet clita kasd gubergren, no sea <span contenteditable="true" data-placeholder="eingabe" id="var3" class="edit" title=""></span>.</p>
		<p>Dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.</p>
		<a href="#">Send to site</a>
	</div>
</div>

现在我的问题是:如何将 span-fields 的内容发送到站点以便从中获取参数？

我知道您可以使用带有输入字段的表单，但我认为如果您的文本很长且其中包含一些单词，那是不好的。

谢谢您的回答!

Answer 1

使用按钮代替 anchor 标签 <button type="button" id="submit">Send to site</button>

var btn = document.getElementById('submit');

// Bind Click event to the button/trigger
btn.addEventListener('click', function () {
   // Retrieve the span value
   var var1 = document.getElementById('var1').textContent;
   var var2 = document.getElementById('var2').textContent;
   var var3 = document.getElementById('var3').textContent;

   // Send the parameters here
   console.log(var1, var2, var3);
});